4

2 つの入力テキストボックスを含むフォームがあり、両方の jQuery 検証ルールを含めました。

<script src="../../Scripts/jquery-validate/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#respondForm').validate({ onclick: false,
      onkeyup: false,
      onfocusout: false,
      highlight: function(element, errorClass) {
        $(element).css({ backgroundColor: 'Red' });
      },
      errorLabelContainer: $("ul", $('div.error-container')),
      wrapper: 'li',
      rules: {
        'text': {
          required: true,
          minlength: 5,
          maxlength: 10
        },
        integer: {
          required: true,
          range: [0, 90]
        }
      },
      messages: {
        'text': {
          required: "xxx_Required",
          minlength: "XXX Should be greater than 5",
          maxlength: "XXX Cannot be greater than 10"
        },
        integer: {
          required: "is required",
          range:  "is out of range: [0,90]"
        }
      }
    });
  });
</script>
</head>
.
.
.
<input type="text" id="text" name="text" />    
<br />
<input type="text" id="integer" name="integer" />
<br />
<input type="submit" name="submit" value="Submit" />
<br />

利用した：

function(element, errorClass) {
  $(element).css({ backgroundColor: 'Red' });
}

エラー コントロールを強調表示します。問題は、次のシナリオでは、両方の入力テキスト ボックスが強調表示されたままになることです (背景色: 赤)。

  1. テキストボックス 1 に 5 文字未満のテキストを入力してください
  2. テキストボックス 2 を空白のままにします
  3. 送信を押します
  4. 両方の入力テキスト ボックスの背景が赤に変更されます (これは正しいです)。
  5. ここで、テキスト ボックス 1 に 6 文字のテキストを入力します (有効な入力)。
  6. テキストボックス 2 を空のままにします
  7. 送信を押します
  8. 両方のテキスト ボックスの背景色は赤のままです。テキストボックス1の背景色が赤であってはならないことが期待されています

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

2

エラー コントロールを強調表示するために使用した関数は、関数を使用して css プロパティbackgroundColorを設定し、要素の属性にルールを配置します。要素の背景をリセットして関数を使用する別のコールバック関数がない場合、またはスタイル タグ内の規則をオーバーライド/削除する別のコールバック関数がない場合、規則はそのまま残り、フォーム要素は引き続き赤になります。バックグラウンド。'red'jQuery.css()styleinheritjQuery.css()

実際にすべきことは、フォーム要素に css クラス ルールを適用して間接的に背景を設定することです (errorClassコールバックへの引数は、エラー時に適用する css クラス名である必要がありますか? その場合はそれを使用する必要があります)。そうすれば、フォームが送信されたときに、フォームの外観を簡単にリセットして再検証できます。

$('#theForm .errorClassName').removeClass('errorClassName');
$('#theForm').validate();
于 2009-11-13T20:57:56.893 に答える