Problème de validation de formulaire jQuery

Question

Je n'utilise aucun plugin jQuery pour valider le formulaire, mais simplement jQuery. Mon problème est qu'après avoir validé tous les éléments d'entrée, même s'il affiche le message d'erreur à l'utilisateur, il soumettra toujours le formulaire sans que l'utilisateur corrige l'erreur.

Pour élaborer, ma forme a 3 éléments d'entrée. Avec la validation jQuery, si tous les 3 éléments sont vides et que l'utilisateur clique sur le bouton Soumettre, une erreur surlignera le premier élément. Si l'utilisateur ne corrige pas l'erreur, mais clique à nouveau sur le bouton Soumettre, il mettra en évidence le deuxième élément [avec le premier élément d'entrée toujours en surbrillance]. De même pour le 3ème élément. Maintenant, si l'utilisateur sans corriger l'erreur (c'est-à-dire, les éléments d'entrée sont toujours en surbrillance) clique à nouveau sur le bouton Soumettre, il soumettra le formulaire. Idéalement, il faut continuer à mettre en évidence le premier élément d'entrée jusqu'à ce que l'utilisateur corrige son erreur puis valider le deuxième élément d'entrée et ainsi de suite. .et c'est ce que je veux faire.

Code jQuery:

$(function() { 

     /*Form Validation*/ 
     $("#name") 
      .focus(function() { 
       if ($(this).val() == "Your Name" || $(this).val() == "Field cannot be blank") { 
        $(this).val(""); 
        $(this).css("background", "#FFF"); 
       } 
      }) 
      .blur(function(){ 
       if ($(this).val() == "") { 
        $(this).val("Your Name"); 
       } 
      }) 
      .keyup(function() { 
        $("#name").val($(this).val()); 
      }), 

     $("#email") 
      .focus(function() { 
       if ($(this).val() == "Your Email" || $(this).val() == "Field cannot be blank") { 
        $(this).val(""); 
        $(this).css("background", "#FFF"); 
       } 
      }) 
      .blur(function(){ 
       if ($(this).val() == "") { 
        $(this).val("Your Email"); 
       } 
      }) 
      .keyup(function() { 
        $("#email").val($(this).val()); 
      }), 


     $("#msg") 
      .focus(function() { 
       if ($(this).val() == "Your Message" || $(this).val() == "You forgot to enter your message") { 
        $(this).val(""); 
        $(this).css("background", "#FFF"); 
       } 
      }) 
      .blur(function(){ 
       if ($(this).val() == "") { 
        $(this).val("Your Message"); 
       } 
      }) 
      .keyup(function() { 
        $("#msg").val($(this).val()); 
      }) 


    }); 

    function checkForm(form) { 
      var cssObj = { 
        'background-color' : 'red', 
        'border' : 'green' 
       } 
      if ($("#name").val() == "" || $("#name").val() == "Your Name") { 
       $("#name").css(cssObj); 
       $("#name").val('Field cannot be blank'); 
       return false; 
      } 
      else if ($("#email").val() == "" || $("#email").val() == "Your Email") { 
       $("#email").css(cssObj); 
       $("#email").val('Field cannot be blank'); 
       return false; 
      } 
      else if ($("#msg").val() == "" || $("#msg").val() == "Your Message") { 
       $("#msg").css(cssObj); 
       $("#msg").val('You forgot to enter your message'); 
       return false; 
      } 
      else { 
       return true; 
      } 
    } 

. .html:

<form action="somepage.php" method="post" id="contactform"> 
     <div class="container"> 
      <div class="field"> 
       <input type="text" tabindex="1" value="Your Name" name="name" id="name" /><br /> 
      </div> 
      <div class="field"> 
       <input type="text" tabindex="2" value="Your Email" name="name" id="email" /><br /> 
      </div>  
      <div class="field"> 
       <textarea tabindex="3" name="msg" id="msg">Your Message</textarea><br /> 
      </div> 
      <input type="button" onclick="return checkForm('contactform');" id="sb" value="Submit" class="submitbtn" /> 

     </div> 
</form> 

Answer 1

Votre fonction checkform se comporte comme il se doit.

Cependant voici une correction possible

function checkForm(form) { 
     var cssObj = { 
       'background-color' : 'red', 
       'border' : 'green' 
      } 
     if ($("#name").val() == "" || $("#name").val() == "Your Name" || $("#name").val() == 'Field cannot be blank') { 
      $("#name").css(cssObj); 
      $("#name").val('Field cannot be blank'); 
      return false; 
     } 
     else if ($("#email").val() == "" || $("#email").val() == "Your Email" || $("#email").val() = 'Field cannot be blank') { 
      $("#email").css(cssObj); 
      $("#email").val('Field cannot be blank'); 
      return false; 
     } 
     else if ($("#msg").val() == "" || $("#msg").val() == "Your Message" || $("#msg").val() == 'You forgot to enter your message' ) { 
      $("#msg").css(cssObj); 
      $("#msg").val('You forgot to enter your message'); 
      return false; 
     } 
     else { 
      return true; 
     } 
} 

S'il vous plaît regarder http://en.wikipedia.org/wiki/Idempotence aussi.