Validation de formulaire JQuery

Question

Je dois effectuer une validation de formulaire avec jQuery. Mais j'ai un problème avec ça.

J'ai un formulaire HTML comme ci-dessous:

<FORM id="formID" method="POST" onsubmit="return checkRequiredFields(this)" action=""> 
    <td><input class="required" type="text" id="input1" value="" /></td> 
    <td><input class="required" type="text" id="input2" value=""/> </td> 
    <td><input class="required" type="text" id="input3" value=""/> </td> 
    <td><input type="text" id="input4" value=""/> </td> 
    <td><input type="submit" id="save" value="Save" /></td> 
</FORM> 

Les trois premiers champs de saisie de texte sont les champs obligatoires. J'ai essayé d'écrire le script comme ci-dessous:

<script type="text/javascript"> 
function checkRequiredFields(form){ 
    var no_errors = true; 
    $(form).find(".required").each(function(){ 
     alert("Inside Loop"); 
      var field = $(this); 
     if (field.val() == ""){ 
      $("#"+field).css("color","red"); 
      no_errors = false; 
     } else {  
      $("#"+field).css("color","white"); 
     } 
    }); 
    return no_errors; 
} 

</script> 

Mais, le code ci-dessus ne fonctionne pas comme prévu. Le alert() n'est jamais exécuté, ce qui signifie que le contrôle ne trouve aucun élément avec la classe "required". Alors, quel est le problème dans mon code?

Answer 1

$("#"+field).css("color","red"); n'est pas correct. field est un objet qui n'est pas une chaîne, mais puisqu'il s'agit déjà d'un objet jQuery, vous pouvez simplement le faire: field.css("color","red");. Vous devrez le faire pour l'autre .css() appel aussi: $("#"+field).css("color","white"); =>field.css("color","white");

Voici une démo: http://jsfiddle.net/eehV6/