は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()方法event.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(); 
    } 
    }) 
})