使用JavaScript進行HTML5驗證

Question

<input type="text" pattern="[a-zA-z]" required id="txtBox" />
<input type="submit" />

• 您如何通過javascript設置“必需”屬性？

• 如果我從提交類型輸入中調用javascript事件，如何檢查該提交請求是否由於HTML5驗證錯誤而失敗？

• 有沒有一種方法可以強制HTML驗證而不發生Submit事件？

Answer 1

• document.getElementById('txtBox').required = true;
• document.getElementById('txtBox').validity.valid取決於元素的有效性，等於true或false 。

---

還有一個invalid事件，該事件在無效的表單控件上觸發。

Answer 2

您如何通過javascript設置“必需”屬性？

您可以.prop()使用.prop()方法：

$('#txtBox').prop('required', true);

如果我在類型為Submit的“ input”元素上從javascript調用click事件，如何檢查該提交請求是否由於HTML5驗證錯誤而失敗？

如果在輸入元素上具有html5 required屬性，則如果未正確驗證該屬性，則不會提交表單。

有沒有一種方法可以強制html在沒有提交事件發生的情況下檢查驗證？

好吧，您可以為keyup, keydown事件編寫一些用於元素的值檢查的函數，從而為您解決問題。

就像是：

$('#txtBox').prop('required', true);

$('#txtBox').on('keyup', function(){
  var regex = /^[a-zA-z]+$/;
   if(!regex.test(this.value)){
      alert(this.id + ' is a required field.');
   }
});