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