html5輸入模式屬性不在表單外工作？

Question

這個小提琴按預期工作 - 當用戶輸入無效的國家代碼時會顯示警告。

沒有form元素的另一個小提琴不起作用。 輸入的pattern屬性似乎需要一個form來驗證。 順便說一句，我正在做一個沒有表單的復雜頁面，我想用`pattern驗證我的輸入字段。 有沒有辦法做到這一點？

Answer 1

這是因為驗證是HTML5 表單驗證的一部分（ http://www.w3.org/TR/html5/forms.html#client-side-form-validation ）。 當表單提交時，如果有任何錯誤，將觸發驗證，提交將被取消。

要手動觸發它，請在元素上使用checkValidity（）函數：

$('input').blur(function(evt) {
    evt.target.checkValidity();
}).bind('invalid', function(event) {
   alert('oops');
});

http://jsfiddle.net/y66vH/3/

Answer 2

驗證在<form>提交時完成。 如果要使用瀏覽器的自然形式驗證及其相應的UI，則需要使用帶有相應提交輸入的<form>以允許用戶自然地提交表單。

但是，在觸發提交事件之前會觸發驗證。 因此，您可以在仍使用瀏覽器自己的驗證時阻止默認表單提交行為。

document.querySelector("form").addEventListener("submit", function (e) {
    e.preventDefault();
});

http://jsfiddle.net/ExplosionPIlls/2gaw3/1/

Answer 3

元素必須是表單的一部分。 如果無法做到這一點，只需將form="formID"添加到“outside”元素即可。

HTML

<form id="form1" action="demo_form.asp">
  <input type="submit" />
</form>
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" form="form1" title="Three letter country code" />

js小提琴： http ： //jsfiddle.net/y66vH/1/

Answer 4

關鍵點是：

1. 是的，驗證適用於ajax表單。
2. 不要使用onclick處理程序。 在包裝表單上使用onsubmit ，並在該表單下按下type="submit" 。
3. 在提交處理程序中，使用if (!theFormOrInput.checkValidity()) return; 馬上。
4. 您必須在有效性檢查后調用event.preventDefault() ，否則將不會顯示瀏覽器彈出窗口。 驗證是默認操作的一部分; 如果你太早取消，你會無意中選擇退出。