フォームのバリデーションを自前で実装せざるを得ない場合に使える Constraint Validation API のサンプルを作った。
ついでに Bootstrap 4.0の Forms Validation との連携もしてみた。
See the Pen Bootstrap 4.0 + Constraint Validation API Sample (ja) by Tenderfeel (@Tenderfeel) on CodePen.
ざっくり説明
feedbackMessageをよしなに設定するとvalidityの同じキーがtrueだった場合にエラーメッセージを出す。
var feedbackMessage = {};
feedbackMessage.name = {
valueMissing: '名前を入力してください',
};
feedbackMessage.email = {
valueMissing: 'メールアドレスを入力してください',
patternMismatch: '不正なメールアドレスです'
};
feedbackMessage.message = {
valueMissing: 'メッセージを入力してください',
tooLong: '文字数が長すぎます'
};
validityプロパティのキーは下の方に全部乗せておいた。
{
//ユーザーがUIが値に変換できない入力をした場合に true
badInput: '',
//要素の値が与えられたパターンにマッチしない場合に true
//[pattern]
patternMismatch: '',
//要素の値が与えられた最大値を超える場合に true
//[max]
rangeOverflow: '',
//要素の値が与えられた最小値を下回る場合に true
//[min]
rangeUnderflow: '',
//要素の値が step 属性で与えられた規則に合わない場合に true
//[step]
stepMismatch: '',
//要素の値が与えられた長さより長い場合に true
//[maxlength]
tooLong: '',
//要素の値が与えられた長さより短い場合に true
//[minlength]
tooShort: '',
//要素の値が正しい構文ではない場合に true
//[type=url][type=email]
typeMismatch: '',
//要素が入力必須のフィールドであるのに値がない場合に true
//[required]
valueMissing : ''
}
HTML要素にバリデーション関連の属性が必要。
たとえばinput要素にmaxlength属性をつけたなら対応するエラーはtooLongになる。