ウェブアクセシビリティに対応した フォームバリデーション

サンプル

説明

アクセシビリティに対応したフォームバリデーションです。
キーボード操作、スクリーンリーダー、reCAPTCHA v3に対応しています。
必須、メールアドレス型、同一性のチェックができます。
バリデーションルールは追加可能です。
デフォルトの挙動はライブバリデーションなしで、ボタン押下時エラーがあると一番上のエラーフィールドに戻り知らせます。


オプションで次のような動作があります。

• ライブバリデーションモード
• 全てのエラーが解消しないと送信できないモード
• 送信ボタン押下時、全てエラーを表示するモード
• reCAPTCHA v3を使用できるモード

使用方法

フォームバリデーションの設定
formタグにdata-form-validation属性を追加します。
オプションを指定したい場合は、このdata-form-validation属性を持つタグにオプションを追加します。

バリデーションフィールドの設定
バリデーション対象のフィールドにdata-form-control属性を指定します。
バリデーションのタイプを指定したい場合は、このdata-form-control属性を持つタグにオプションを追加します。

必須：data-form-val-req,
必須（チェックボックス）：data-form-val-req-checked,
メールアドレス：data-form-val-email
同一性：data-form-val-equality

               <input
                  type="text"
                  name="simei"
                  data-form-val-req
                  data-form-control
                />

エラーメッセージの設定
バリデーションに対応するエラーメッセージを指定します。
関連付けたいバリデーションのnameの値をdata-form-err-msg-reqなどの属性に指定します。
エラーメッセージを個別に変更したい場合は、data-form-err-text=""属性を追加し、個別のメッセージ文を指定します。

必須：data-form-err-msg-req,
必須（チェックボックス）：data-form-err-msg-req-checked,
メールアドレス：data-form-err-msg-email
同一性：data-form-err-msg-equality

<p tabindex="-1" role="status" aria-live="polite" class="is-form-error-hidden"
 data-form-err-msg-req="simei"
 data-form-err-text="氏名入力必須です">
</p>

サンプルコード

            <div class="c-form-fieldset">
              <div class="c-form-legend">
                <label for="simei">氏名</label><span class="c-form-req">必須</span>
              </div>
              <div class="c-form-unit">
                <p tabindex="-1" role="status" aria-live="polite" class="c-form-text-error is-form-error-hidden"
                  data-form-err-msg-req="simei"
                  data-form-err-text="氏名入力必須です"></p>
                <input id="simei" type="text" name="simei" class="c-form-control is-form-control-width-full-medium"
                  data-form-val-req
                  data-form-control/>
              </div>
            </div>

設定オプション

data-form-validation-mode-live
説明: ライブバリデーションモードになります。
使用例: data-form-validation-mode-live="true"
値: true | なし
補足：オンにする場合は注意が必要です。
ライブバリデーションは読み上げると使いづらいと感じる場合があります。

data-form-validation-mode-button-disabled
説明: 全てエラーが解消しないと送信できないモードになります。
使用例: data-form-validation-mode-button-disabled="true"
値: true | なし
補足：オンにする場合は注意が必要です。
全てのエラーを解消するまで送信させないUIは送信ボタンのわからず使いづらいと感じる場合があります。

data-form-validation-mode-submit-allfield
説明: 送信ボタン押下時、全てエラーを表示するモードになります。
使用例: data-form-validation-mode-submit-allfield="true"
値: true | なし
補足：オンにする場合は注意が必要です。
ボタン押下時、全てのエラーを表示する（読み上げる）と使いづらいと感じる場合があります。

data-form-validation-recaptcha
説明: reCAPTCHA v3を使用できるようになります。
使用例: data-form-validation-recaptcha="true"
値: true | なし
補足：reCAPTCHA使用時は次のコードが必要になります。
data-form-val-recaptcha-token
<input type="hidden" name="recaptchaToken" data-form-val-recaptcha-token />

//reCAPTCHA v3用のキー込みのjsを指定
<script src="https://www.google.com/recaptcha/api.js?render=xxxxx" defer></script>

//reCAPTCHA を使用できるように属性を指定
<form data-form-validation data-form-validation-recaptcha>
//submitの処理に属性とキーを追加
<button type="submit" data-form-submit data-form-val-recaptcha-key="xxxxx">確認する</button>
//tokenを取得するinputタグを作成
<input type="hidden" name="recaptchaToken" data-form-val-recaptcha-token />
</form>

変更履歴

[2024-06-28] 1.0.0
-NEW: 初期リリース