如何禁用「保存」，直到字段通過驗證。 NO <form>標籤

Question

在客戶端，我想以某種方式禁用「保存」按鈕，以防未通過驗證。該解決方案驗證各個字段像這樣：

//checking if null 

    $("#editAccountName").blur(function() { 
      var editAccountName = $("#editAccountName").val(); 
      if (editAccountName == "" || editAccountName == null) { 
       $("#editAccountNameError").html('<font color="#cc0000">The account name is required</font>'); 
       $("#editAccountName").css("background-color", "#cc0000"); 
      } 
      else { 
       $("#editAccountNameError").html('<font color="#cc0000"></font>'); 
       $("#editAccountName").css("background-color", "transparent"); 
      } 
     }); 

//checking if null 

     $("#editAddress").blur(function() { 
      var editaddress = $("#editAddress").val(); 
      if (editaddress == "" || editaddress == null) { 
       $("#editAddressError").html('<font color="#cc0000">The address is required</font>'); 
       $("#editAddress").css("background-color", "#cc0000"); 
      } 
      else { 
       $("#editAddressError").html('<font color="#cc0000"></font>'); 
       $("#editAddress").css("background-color", "transparent"); 
      } 
     }); 

//checking if null 

     $("#editCity").blur(function() { 
      var editCity = $("#editCity").val(); 
      if (editCity == "" || editCity == null) { 
       $("#editCityError").html('<font color="#cc0000">The city is required</font>'); 
       $("#editCity").css("background-color", "#cc0000"); 
      } 
      else { 
       $("#editCityError").html('<font color="#cc0000"></font>'); 
       $("#editCity").css("background-color", "transparent"); 
      } 
     }); 

//checking if null 

     $("#editState").blur(function() { 
      var editState = $("#editState").val(); 
      if (editState == "" || editState == null) { 
       $("#editStateError").html('<font color="#cc0000">The city is required</font>'); 
       $("#editState").css("background-color", "#cc0000"); 
      } 
      else { 
       $("#editStateError").html('<font color="#cc0000"></font>'); 
       $("#editState").css("background-color", "transparent"); 
      } 
     }); 

//no nulls or letters 

     $("#editZip").blur(function() { 
      var regexnumbers = /\d+-?/; 
      var editzip = $("#editZip").val(); 
      if (!regexnumbers.test(editzip) == true || editzip == '' || editzip == null) { 
       $("#editZipError").html('<font color="#cc0000">The numeric zip code is required</font>'); 
       $("#editZip").css("background-color", "#cc0000"); 
      } 
      else { 
       $("#editZipError").html('<font color="#cc0000"></font>'); 
       $("#editZip").css("background-color", "transparent"); 
      } 
     }); 

//*optional* 
//needs to be exactly 10 digits in case anything is entered in any of the boxes 

     $("#editArea,#editPrefix,#editSuffix").blur(function() { 
      var phone = $("#editArea").val() + $("#editSuffix").val() + $("#editPrefix").val(); 

      if (phone.length > 0 && phone.length < 10) { 
       $("#editPhoneError").html('<font color="#cc0000">The phone number must be 10 digits</font>'); 
       $("#editArea").css("background-color", "#cc0000"); 
       $("#editPrefix").css("background-color", "#cc0000"); 
       $("#editSuffix").css("background-color", "#cc0000"); 
      } 
      else { 
       $("#editPhoneError").html('<font color="#cc0000"></font>'); 
       $("#editArea").css("background-color", "transparent"); 
       $("#editPrefix").css("background-color", "transparent"); 
       $("#editSuffix").css("background-color", "transparent"); 
      } 

     }); 

我知道這不是最乾淨的解決方案，但因爲需要我的地方<form>標籤之間的領域（與衝突，我不能利用jQuery插件的其他功能）。標記看起來像這樣：

<label>Clinic Name</label> 
<input id="editAccountName" name="editAccountName" class="accountEdit" type="text" value="@Model.Pharmacy.AccountName" /><span id="editAccountNameError" value="0"></span> 

<label>Address</label> 
<input id="editAddress" name="editAddress" class="accountEdit" type="text" value="@Model.Pharmacy.Address" /><span id="editAddressError" value="0"></span> 

<label>City</label> 
<input id="editCity" name="editCity" class="accountEdit" type="text" value="@Model.Pharmacy.City" /><span id="editCityError" value="0"></span> 

<label>State</label> 
<input id="editState" name="editState" class="accountEdit" type="text" value="@Model.Pharmacy.State" maxlength="2"/><span id="editStateError" value="0"></span> 

<label>Zip</label> 
<input id="editZip" name="editZip" maxlength="5" class="accountEdit" type="text" value="@Model.Pharmacy.ZipCode" /><span id="editZipError" value="0"></span> 

<label>Phone Number (optional)</label> 
<div> 
<input id="editArea" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Area" depends /> 
</div> 
<div> 
<input id="editPrefix" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Prefix" depends /> 
</div> 
<div> 
<input id="editSuffix" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Suffix" depends /> 
        </div> 
<span style="margin-left:-208px; margin-top:50px;" id="editPhoneError" value="0"></span> 
</div> 

<input id="btnCancel" type="button" value="Cancel" /> 
<input id="btnSave" type="button" value="Save" /> 

有什麼建議嗎？

Answer 1

所以首先，當我們使用一個特殊的css類 - 比如「error」 - 它本身定義了每個字段的外觀時，不是在每個字段上設置背景顏色。然後是這樣的：

 if (editaddress == "" || editaddress == null) { 
      $("#editAddressError").html('<font color="#cc0000">The address is required</font>'); 
      $("#editAddress").css("background-color", "#cc0000"); 
     } 
     else { 
      $("#editAddressError").html('<font color="#cc0000"></font>'); 
      $("#editAddress").css("background-color", "transparent"); 
     } 

變成這樣：

  if (editaddress == "" || editaddress == null) { 
      $("#editAddressError").html('<font color="#cc0000">The address is required</font>'); 
      $("#editAddress").addClass("error"); 
     } 
     else { 
      $("#editAddressError").html('<font color="#cc0000"></font>'); 
      $("#editAddress").removeClass("error"); 
     } 

（請注意，我會使用該字段錯誤跨越類似的東西，但我會屋檐是由你）

然後，您可以在您的驗證，使年底使用類（「錯誤」）的存在/禁用保存按鈕：

$("#btnSave").prop("disabled", ($(":input.error").length > 0)); 

基本上，如果至少有一個類爲「錯誤」的輸入字段，請禁用保存按鈕。否則，啓用它。

希望這會有所幫助！

Answer 2

這是一個有點瘋狂，但在基本的術語，你可以保持一個布爾每個驗證規則，像這樣：

$("#editAccountName").blur(function() { 
     var editAccountName = $("#editAccountName").val(); 
     if (editAccountName == "" || editAccountName == null) { 
      $("#editAccountNameError").html('<font color="#cc0000">The account name is required</font>'); 
      $("#editAccountName").css("background-color", "#cc0000"); 
      accountNameValid = false; 
     } 
     else { 
      $("#editAccountNameError").html('<font color="#cc0000"></font>'); 
      $("#editAccountName").css("background-color", "transparent"); 
      accountNameValid = true; 
     } 
    }); 

後來檢查按鈕必須可以點擊：

if(accountNameValid && addressValid && ...){ 
    // process form 
}