HTML5 Form Validationサンプル(Bootstrap 4.0 + Constraint Validation API)

フォームのバリデーションを自前で実装せざるを得ない場合に使える 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になる。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください