html5 バリデーションをカスタマイズ

Question

html5 バリデーションをJSでカスタマイズしました。

$(document).ready(function() {

  $(':password').each(function(i) {
    this.oninvalid = function(e) {
      // オブジェクトの確認
      console.dir(this.validity)
      e.target.setCustomValidity(e.target.minLength + " 文字以上で入力してください。");
    };
  });

});

setCustomValidity を使うと、
customError: true が常にtrueになり、ずっとinvalidでエラー状態です。

invalidな時だけ、エラー内容を表示させるにはどうすれば良いでしょうか？

• 上記のオブジェクトの確認の中身↓

ValidityState
  badInput: false
  customError: true
  patternMismatch: false
  rangeOverflow: false
  rangeUnderflow: false
  stepMismatch: false
  tooLong: false
  tooShort: false
  typeMismatch: false
  valid: false
  valueMissing: false

Answer 1

一度カスタムなエラーをセットしてしまうと、それは自分で外さない限り残り続けます。

onchangeや送信ボタンのclickなど適当なタイミングでカスタムエラーを空文字列にして消し去っておきましょう（エラーが残っていると、onsubmitにはたどり着きません）。

なお、$('エレメント').on('invalid',function(){...})のように書くことで、invalidイベントもjQuery経由で使えます。

Comments

[axax90]

ありがとうございます！！

> 一度カスタムなエラーをセットしてしまうと、それは自分で外さない限り残り続けます。
そういうことなんですね。
この辺の理解が出来てませんでした。。