在jQuery驗證錯誤信息消失很快

Question

我已經通過使用下面的代碼，但錯誤消息試過迅速消失

$(document).ready(function() { 
    $('form').submit(function() { 
     if ($("#first").val().match('^[a-zA-Z]{3,16}$')) { 
      alert("valid"); 
     } else { 
      $("#error_msg").after("invalid"); 
     } 
    }) 
}) 

Answer 1

使用event.preventDefault（）。如果調用此方法，則不會觸發該事件的默認操作。

$(document).ready(function() { 
 
    $('form').submit(function(event) { 
 
    if ($("#first").val().match('^[a-zA-Z]{3,16}$')) { 
 
     alert("valid"); 
 
    } else { 
 
     $("#error_msg").empty().text("invalid"); 
 
     alert("invalid"); 
 
     event.preventDefault(); 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input type="text" id="first"> 
 
<div id="error_msg"></div> 
 
<button type="submit">submit</button> 
 
</form>

Answer 2

使用preventDefault()方法阻止發生一個元素的默認動作：

$(document).ready(function(){ 
    $('form').submit(function(e){ 
    if($("#first").val().match('^[a-zA-Z]{3,16}$')){ 
     alert("valid"); 
    } 
    else{ 
     e.preventDefault(); 
     $("#error_msg").after("invalid"); 
    } 
    }) 
}) 

Answer 3

使用return false;

$(document).ready(function(){ 
    $('form').submit(function(e){ 
    if($("#first").val().match('^[a-zA-Z]{3,16}$')){ 
     alert("valid"); 
    } 
    else{  
     $("#error_msg").after("invalid"); 
     return false; 
    } 
    }) 
}) 

Answer 4

使用return false或preventDefault()方法來停止動作：

$(document).ready(function(){ 
    $('form').submit(function(e){ 
    if($("#first").val().match('^[a-zA-Z]{3,16}$')){ 
     alert("valid"); 
    } 
    else{ 
     $("#error_msg").after("invalid"); 
     return false; 
     //or 
     e.preventDefault(); 
    } 
    }) 
})