4

4つのテキストフィールドのグループの1つに値があることを確認するjQuery検証（関連する質問に対するSparkyの回答に基づく）のカスタムメソッドがあります。これは正常に機能しますが、フィールドの1つに値を入力するとエラーメッセージが消えても、エラークラスはそのまま残り、テキストフィールドはエラーカラー（この例では赤い背景）で強調表示されます。 ）。

これを修正する方法について何かアイデアはありますか？

ありがとう。

これが問題のjsfiddleです。

これが私のスクリプトです：

$(document).ready(function () {

  $.validator.addMethod("textboxrule", function (value, element) {
      return ($('#my_text_field_1').val() != '' || $('#my_text_field_2').val() != '' || $('#my_text_field_3').val() != '' || $('#my_text_field_4').val() != '')
  }, "Select at least one of these four");

  $('.my_form').validate({ // initialize the plugin
      errorLabelContainer: ".form_errors",
      wrapper: "li",
      groups: {
          somename: "my_text_field_1 my_text_field_2 my_text_field_3 my_text_field_4"
      },
      rules: {
          'my_text_field_1': {
              textboxrule: true
          },
          'my_text_field_2': {
              textboxrule: true
          },
          'my_text_field_3': {
              textboxrule: true
          },
          'my_text_field_4': {
              textboxrule: true
          }
      },
      submitHandler: function (form) { // for demo
          alert('valid form submitted'); // for demo
          return false; // for demo
      }
  });

});

これが私のHTMLです：

<form class="my_form" method="post" action="#">
    <div>
        <ul class="form_errors"></ul>
    </div>
    <p>
<label>My text field 1</label>
<input id="my_text_field_1" name="my_text_field_1"  type="text" value="" /></p>

<p>
  <label>My text field 2</label>
  <input id="my_text_field_2" name="my_text_field_2"  type="text" value="" />
</p>

<p>
  <label>My text field 3</label>
  <input id="my_text_field_3" name="my_text_field_3"  type="text" value="" /></p>

<p>
  <label>My text field 3</label>
  <input id="my_text_field_4" name="my_text_field_4"  type="text" value="" /></p>

    <input type="submit" value="Submit" />
</form>

これが私のCSSです：

input.error { 
    background: red; 
}
4

1 に答える 1

3

検証に合格した場合は、検証メソッドを拡張してエラークラスを削除する必要があります。これを試して：

$.validator.addMethod("textboxrule", function (value, element) {
    var returnValue = ($('#my_text_field_1').val() != '' || $('#my_text_field_2').val() != '' || $('#my_text_field_3').val() != '' || $('#my_text_field_4').val() != '');

    if (returnValue) {
        $("#my_text_field_1, #my_text_field_2, #my_text_field_3, #my_text_field_4").removeClass("error");
    }

    return returnValue;
}, "Select at least one of these four");

フィドル： http： //jsfiddle.net/u4WM4/3/

于 2013-03-06T11:22:43.267 に答える