使用jQuery驗證器驗證兩個鏈接的字段

我有兩個選擇元素：小時和分鐘。如果一個或兩個字段留空，我需要出現錯誤。我一直在使用errorPlacement函數來放置一個錯誤，但是當你糾正這個錯誤時，錯誤消失，但另一個字段仍然無效。使用jQuery驗證器驗證兩個鏈接的字段

我已經試過validator.addMethod的各種組合，但總有一些問題，其中兩個錯誤都將顯示，或沒有錯誤將顯示等

有沒有人遇到這個問題？或者是否有人知道以正確的方式檢測和處理錯誤的方法？

在此先感謝。

2012-01-18 Dean James

我不確定在您的示例中需要哪個字段，但您可能正在尋找jQuery驗證的依賴表達式。例如，如果你想使分鐘只需要如果時間有一個值，你可以設置驗證這樣的：

rules: { 
    minutes: { 
     required: "#hours:filled" 
    } 
}

如果這不是你想要的邏輯，你將極有可能創建一個自定義的驗證方法。這是你想要的邏輯嗎？

參考：

jQuery Validation Dependency Expression

編輯：

這裏是一個自定義的驗證：

jQuery.validator.addMethod("hoursMinutes", function (value, element, param) { 
    return $("#hours").val() != "" && $("#minutes").val() != ""; 
}, "Please enter both hours and minutes."); 

validator.settings.rules = { 
    hours: { hoursMinutes: true } 
}

這將使只有1個錯誤信息顯示出來。

編輯＃2：

試試這個。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      var validator = $("#form1").validate({ 
       highlight: function (element, errorClass) { 
        $(element).addClass("invalid"); 
       }, 
       unhighlight: function (element, errorClass) { 
        $(element).removeClass("invalid"); 
       }, 
       groups: { time: "hours minutes" }, 
       errorPlacement: function (error, element) { 
        $("#errors").append(error); 
       }, 
       messages: { 
        hours: { required: "Please enter both hours and minutes." }, 
        minutes: { required: "Please enter both hours and minutes." } 
       }, 
       showErrors: function (errorMap, errorList) { 
        this.defaultShowErrors(); 

        if ($("#hours:filled, #minutes:filled").length == 2) { 
         $("#errors label").hide(); 
        } 
        else { 
         $("#errors label").show(); 
        } 
       } 
      }); 

      $("#submitBtn").click(function() { 
       if ($("#form1").valid()) { 
        alert("valid"); 
       } 

       return false; 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     .invalid 
     { 
      border: solid 1px red; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" action="" method="post"> 
    <div id="errors"> 
    </div> 
    <input id="hours" name="hours" type="text" class="required" /> 
    <input id="minutes" name="minutes" type="text" class="required" /> 
    <button id="submitBtn"> 
     Go</button> 
    </form> 
</body> 
</html>

來源

2012-01-18 14:12:03

不，這會設置兩種不同的方法來顯示兩個不同的錯誤。需要填寫小時和分鐘字段。如果兩個或其中一個留空，則應出現一個，但突出顯示這兩個字段。當用戶更正一個字段時，突出顯示應該被刪除，但是由於其他字段仍然無效，錯誤應該保留。 – 2012-01-18 14:36:35

我編輯了我的答案與另一個可能的解決方案。 – 2012-01-18 14:58:11

感謝您的幫助。在上述自定義方法中，分鐘字段未經驗證。如果我要在validator.settings.rules中添加分鐘規則，那麼錯誤將顯示兩次。這是主要問題。 – 2012-01-19 09:22:26

使用jQuery驗證器驗證兩個鏈接的字段

回答

相關問題