jQuery表單驗證

Question

我一直在研究這個jQuery表單，它只允許用戶在填寫完所有字段後提交。因此，本質上，提交字段（或者在我的情況下'請求'字段）是灰色的，直到所有字段不是空白。我的按鈕總是變暗，請有人幫我解決這個問題嗎？我有jQuery的以下內容：

$(function() { 
    var $submit = $(".request input"); 
    var $required = $(".required"); 
    function containsBlanks(){ 
     var blanks = $required.map(function(){ return $(this).val() == "";}); 
     // the inArray helper method checks if value is within an array 
     return $.inArray(true, blanks) != -1; 
    } 

    function requiredFilledIn(){ 
     if(containsBlanks()) 
     $submit.attr("disabled","disabled"); 
    else 
     $submit.removeAttr("disabled"); 
    } 

    $("#form2 span").hide(); 
    $("input").focus(function(){ 
     $(this).next().fadeIn("slow"); 
    }).blur(function(){ 
     $(this).next().fadeOut("slow"); 
    }).keyup(function(){ 
     //Check all required fields. 
     requiredFilledIn(); 
    }); 

    requiredFilledIn(); 
}); 

這是我的形式

<div id="form2" title="Request a Call-back"> 
     <p class="validateTips">All form fields are required. The submit button will activate once this is done.</p> 
     <form action="includes/requestcall.php" method="post"> 
      <fieldset> 
       <label for="name">Name:</label> 
       <input type="text" name="name" id="name" size="30" class="required" /> 
       <span>Please enter your Name</span> 
       <br /> 
       <br /> 
       <label for="number">Number:</label> 
       <input type="text" name="number" id="number" size="30" class="required" /> 
       <span>Please enter your number</span> 
       <br /> 
       <br /> 
       <label for="time">Preferred Time:</label> 
       <input type="text" name="time" id="time" size="30" class="required" /> 
       <span>Please enter your preferred time</span> 
       <br /> 
      </fieldset> 
      <p class="request"> 
      <input type="submit" value="Request" class="btn-submit"> 
      </p> 
     </form> 
    </div> 

我還在學習jQuery和任何幫助，將不勝感激。

Answer 1

我已經略微調整了代碼以使用過濾器函數來檢索空文本框以及使用更改事件。

This is the link to the updated script running your markup on JSFiddle

以下是更新後的腳本：

$(function() { 
    var $submit = $("input.btn-submit").attr("disabled", "disabled").css("color", "red"); 
    var $required = $(".required"); 

    function requiredFilledIn() { 
     var blanks = $required.filter(function() { 
      return $(this).val() === ""; 
     }); 
     if (blanks.length > 0) $submit.attr("disabled", "disabled").css("color", "red"); 
     else $submit.removeAttr("disabled").css("color", "black"); 
    } 

    $("#form2 span").hide(); 
    $("input:text").focus(function() { 
     $(this).next().fadeIn("slow"); 
    }).blur(function() { 
     $(this).next().fadeOut("slow"); 
    }).change(function() { 
     //Check all required fields. 
     requiredFilledIn(); 
    }); 
});