Classe pas ajouté avec contrôle d'entrée jQuery

Question

moi à nouveau,

Im en utilisant:

<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> 

Exemple 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> 

qui fera partie d'une validation de forme plus grande, mais l'erreur La classe n'est pas ajoutée (bien qu'elle ne remplisse pas les champs avec une classe requise). Le formulaire essaie juste de soumettre - si j'ajoute event.preventDefault(); alors le formulaire ne soumet pas mais la classe d'erreur n'est pas encore ajoutée?

Le jQuery est ajouté avant la balise

Answer 1

Ajout de la classe fonctionne très bien, mais votre logique return est en arrière.

Si vous voulez éviter le vous soumettre besoin de retourner false ... ou appelez 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>