模式HTML5驗證不會阻止表單提交時未驗證

我有一個奇怪的問題，即兩個數字字段上的模式無法正常工作（即使字段未驗證，表單可以提交）。該HTML看起來像以下：模式HTML5驗證不會阻止表單提交時未驗證

 <input type="text" class="txtmin" pattern="^[+-]?\d*(\.\d+)?$" placeholder="Minimum price"> 

     <input type="text" class="txtmax" pattern="^[+-]?\d*(\.\d+)?$" placeholder="Maximum price">

當我輸入的東西進入該領域，如果沒有正則表達式匹配，現場被標記爲紅色，但如果我嘗試提交onclick事件的形式，確認不阻止用戶改變輸入值，我得到一個異常...

$(".btnAnalyze").click(function() { 
      // the form doesn't validates?? 
     });

我是想這樣的事情：

$('txtmin').oninvalid = function (event) { 
      return; 
     }

但是，這並不做任何事情？有人可以幫我嗎？

編輯：利雅得，這是完整的代碼的HTML和我觸發事件：

<form> 
    <span class="input-group-btn"> 
          <button class="btn btn-default btnGo" type="submit">Go!</button> 
         </span> 

</form> 

    $(".btnGo").click(function() { 

      if ($('.txtSearch').val() == "") { 
       ShowMessage("Please enter the search term!"); 
       return; 
      } 
      else{ 
       PostAndUpdate($('.txtSearch').val(), $('input[name=type]:checked').val(), $('input[name=shipping]:checked').val(), $('input[name=condition]:checked').val(), $('.txtmin').val(), $('.txtmax').val()); 
      } 
     });

來源

2016-12-27 Jadin Stojadin

都是表單標籤內的字段？ –

@ Ryad.iv不，他們不是，我避免把它們放在窗體標籤內。我能用jQuery來解決這個問題嗎？ –

你需要表單標籤，以便它可以驗證和阻止提交，否則你將需要驗證你的輸入與JavaScript。 –

單擊該按鈕並不等同於提交表單。動作的順序是：

點擊按鈕
消防click按鈕事件
如果click事件不會在表格上取消該事件，然後火submit
如果submit事件不會取消事件（例如驗證錯誤！），然後繼續提交表格

由於您正在做的工作在click事件，表單尚未驗證！您應該在表單的submit事件中完成這項工作。

來源

2016-12-27 10:57:47

如何檢查表單是否僅在常規單擊事件中得到驗證？ –

你可以在窗體上調用'checkValidity（）'（例如''form]。checkValidity（）'），如果表單中的所有元素均有效，將返回「true」。 –

黑暗Abosl和僅在單個字段上，他們有這種方法CheckValiditiy？或有效（）？ –

如果你希望在你的input領域唯一的價格，然後更好的（即大多數瀏覽器所支持的）的方法是使用number型input與min和max屬性：

<input type="number" class="txtmin" min="0.01" max="1000.00" placeholder="Minimum price"> 

<input type="number" class="txtmax" min="0.01" max="1000.00" placeholder="Maximum price">

注意，這兩個領域都min和max屬性設置，但這不是強制性的 - 您可以用這種方式限制或不使用純HTML的每個輸入的值。

另一種方法是使用Javascript庫，如jQuery，並執行輸入的手動驗證。

來源

2016-12-27 10:59:04 bodi0

模式HTML5驗證不會阻止表單提交時未驗證

回答

相關問題