jQuery表单验证问题

Question

我没有使用任何jQuery插件来验证表单，只是简单的jQuery。我的问题是，在它验证了全部输入元素后，即使它向用户显示错误消息，它仍然会提交表单，而用户不会纠正错误。

详细说明，我的表单有3个输入元素。使用jQuery验证，如果所有3个元素都是空的，并且用户点击提交按钮，则会突出显示第一个元素的错误。如果用户不纠正错误，但再次点击提交按钮，它将突出显示第二个元素[第一个输入元素仍然高亮显示]。同样的第三个元素。现在，如果用户未更正错误（即输入元素仍然突出显示），再次点击提交按钮，它将提交表单。理想情况下，应该继续突出显示第一个输入元素，直到用户纠正其错误，然后验证第二个输入元素等等。这正是我想要做的。

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

你checkform函数的行为像它应该。

但是这里是一个可能的修正

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

请看http://en.wikipedia.org/wiki/Idempotence了。