觸發無效事件jquery

Question

無效提交表單可以通過自定義函數觸發「無效彈出框」嗎？

無效彈出 - >https://www.html5rocks.com/static/images/tutorials/constraintvalidation/ChromeForAndroid.png

Answer 1

假設你有使用input

<input type="text" id="input_id"> 

的jQuery才能執行此驗證爲：

$(document).on("keyup", "#input_id", function(){ 
    if($(this).val() == '') 
    { 
     /* show error message here */ 
    } 
}); 

或者，如果你想使用純JavaScript，你可以使用：

var el = document.getElementById('input_id'); 

el.addEventListener("keyup", function() { 
    validate_me(this); 
}, false); 

function validate_me(e) 
{ 
    if(e.value == '') 
    { 
      /* error message here */ 
    } 
} 

如果您希望只html5解決方案：

爲了檢查某個字段是否有效，使用：

$('#myField')[0].checkValidity() // returns true/false 

要檢查的形式是有效的，使用方法：

$('#myForm')[0].checkValidity() // returns true/false 

如果你想顯示本機錯誤消息，一些瀏覽器有（如鉻），不幸的是這樣做的唯一途徑是通過提交表單，像這樣：

var $myForm = $('#myForm') 
if (!$myForm[0].checkValidity()) { 
    // If the form is invalid, submit it. The form won't actually submit; 
    // this will just cause the browser to display the native HTML5 error messages. 
    $myForm.find(':submit').click() 
} 

請記住，所有瀏覽器都不支持HTML5驗證。