はクラス私jQueryの入力チェック

Question

に追加されていない再び、

イム：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.check').submit(function() { 

    var abort = false; 

     $('.required').each(function() { 
      if ($(this).val()==='') { 
       $(this).addClass(' error'); 
       abort = true; 
      } 
     }) 
     return abort; 
     }) 
}); 
</script> 

例HTML大きなフォーム検証の一部、しかし、エラーになります

<form class="check" style="font-family: Arial;" action="contact.php" method="post"> 
<input class="wipe required" style="font-family: Arial;" type="text" name="name" value="Full Name" /> 
<more input fields as above> 
<more input fields as above> 
<more input fields as above> 
<more input fields as above> 
<input class="right" style="font-family: Arial;" type="submit" value="SEND" /></form> 

クラスが追加されていません（必要なクラスをフィールドに入力しなくても）。私がevent.preventDefault（）を追加した場合、フォームは送信を試みます。フォームは送信されませんが、エラークラスは追加されません。

jQueryのは、クラスを追加すると、正常に動作しますが、あなたのreturn論理が逆方向にあるタグ

Answer 1

の前に追加されます。

あなたがfalseを返す...またはあなたも、どこでこのスクリプトを入れているあなたのHTMLを表示する必要がevent.preventDefault()

$('.check').submit(function() { 
 

 
    var proceed = true; 
 

 
    $('.required').each(function() { 
 
     if ($(this).val() === '') { 
 
     $(this).addClass(' error'); 
 
     proceed = false; 
 
     } 
 
    }); 
 
    return proceed; 
 
    });

.error { 
 
    background: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="check" style="font-family: Arial;" action="contact.php" method="post"> 
 
    <input class="wipe required" style="font-family: Arial;" type="text" name="name" value="Full Name" /> 
 
    <input class="wipe required" style="font-family: Arial;" type="text" name="age" value="" /> 
 
    <input class="right" style="font-family: Arial;" type="submit" value="SEND" /> 
 
</form>