jQuery Validatorで2つのリンクされたフィールドを検証する

私は2つの選択要素、時間と分を持っています。一方または両方のフィールドが空白のままになっている場合、表示するにはエラーが必要です。 errorPlacement関数を使用して1つのエラーを配置していますが、その1つのフィールドを修正すると、エラーは消えますが、他のフィールドはまだ無効です。jQuery Validatorで2つのリンクされたフィールドを検証する

私は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

いいえ、これは、2つの異なるエラーを表示する2つの異なる方法を設定します。必要なのは、時間と分の両方のフィールドに記入する必要があることです。どちらか一方または両方を空白のままにした場合は、単一の文字が表示されますが、両方のフィールドが強調表示されます。ユーザーがフィールドを修正すると、ハイライトが削除されますが、他のフィールドは無効なので、エラーは残ります。 –

別の解決方法で自分の答えを編集しました。 –

あなたのおかげでありがとう。上記のカスタムメソッドでは、分フィールドが検証されていません。また、validator.settings.rulesにルールを追加する場合、エラーは2回表示されます。これが主な問題です。 –

jQuery Validatorで2つのリンクされたフィールドを検証する

答えて

関連する問題