6

標準の新しいパスワード フォームの 1 つを作成しようとしています。このフォームでは、新しいパスワードを 1 回入力してから、確認のために 2 回入力します。次のシナリオのように、これらのフィールドからぼかして一致しない場合は、両方が無効とマークされるようにしたいと思います。

  1. ユーザーは にパスワードabcを入力し#newpassword1ます。
  2. ユーザータブから#newpassword2.
  3. ユーザーは にパスワードdefを入力し#newpassword2ます。
  4. ユーザーのタブが離れています。
  5. #newpassword1 検証により不一致が検出され、と の両方が無効としてマーク#newpassword2されます。

を使用してイベントのターゲットを無効としてマークできることは知っていますがe.target.setCustomValidity(...)、JavaScript のイベント モデルをよく理解していないため、イベント ターゲット自体の無効性に基づいて別の要素を無効としてマークする方法がわかりません。

これは、私が使用しようとしている (動作していない) コードの関連する抜粋です。

if ( $('#newpassword1').val() != $('#newpassword2').val() ) {
    errorMessage = "The new passwords you've entered don't match.";

    $('#newpassword1, #newpassword2').setCustomValidity(errorMessage);
}

これは直感的には機能するはずですが、もちろん機能しません。エラーは単純TypeError: $(...).setCustomValidity is not a functionです。

注意: 私はフィールドに赤いリングなどを追加する方法を尋ねているわけではありませvalidity.validんfalse。

これを行うことは可能ですか？

ありがとう！

4

2 に答える 2

10

以下のコードを試してください。jQuery は選択されたオブジェクトの配列を返し、setCustomValidityjquery オブジェクトではなくネイティブ入力要素でサポートされているため、そのエラーが発生しています。そのエラーが発生しています。

$('#newpassword1, #newpassword2').each(function() {
    this.setCustomValidity(errorMessage)
});
于 2013-06-11T00:16:58.807 に答える