株式会社GIG Workship事業部エンジニアの奥村です。

多くのサイトに欠かせないフォーム要素。フリーランス・副業向けマッチングサービス『Workship』にももちろん様々な形でフォームが存在しています。

フォームでは様々な入力パターンが考えられるので、開発者が想定できなかった値が入力された結果バグが発生してしまうこともありますし、悪意のある入力が原因で個人情報流出などの大事故が発生する可能性も0ではありません。

よって開発においてフォームのバリデーションは非常に重要度が高いのです。

※以降スクショは全てGoogleChrome環境によるものです。

HTML標準のバリデーション機能

HTML5に標準搭載されているform validationを利用すれば簡単にクライアントサイドで入力値の検証ができます。フィールドごとに検証を行ってくれて不正な状態でフォームを送信しようとすると中断して警告を表示してくれます。

難しい知識も必要なくHTMLに必要な記述をするだけなので、お手軽ながらとても便利な機能です。

JavaScriptを使ってform validationをカスタマイズする

お手軽かつ便利なのですが標準機能だけではできないこともあります。

アンケートフォームなどでよく目にする「複数のチェックボックスのうち1つ以上が選択されているかどうかの検証」ですが、そのような機能は標準では備わっていないのでHTMLに記述するだけでは実現できません。

また、バリデーションエラー時に表示されるエラーメッセージはブラウザ毎に固定されており、こちらもHTMLへの記述のみでは変更ができません。

どちらもJavaScriptを使ってカスタマイズする必要があるので方法を解説していきます。

複数チェックボックスのバリデーションを実装する

チェックボックスの選択必須化は要素にrequired属性を付与することで実現できます。

HTML

<input type="checkbox" name="fruit" required="required"> りんご
<input type="checkbox" name="fruit" required="required"> みかん
<input type="checkbox" name="fruit" required="required"> ばなな

しかしこのコードでは全チェックボックスにrequired属性が付いていますので全て選択しない限りフォームの送信ができません。

そこで

・1つ以上選択されている場合は全チェックボックスのrequired属性を削除する

・1つも選択されていない場合は全チェックボックスにrequire属性を付与する

のように条件によりrequired属性の有無をJavaScriptで切り替えることで擬似的に「1つ以上選択されているかどうか」を検証します。

JavaScript

// name属性でチェックボックスを取得する
const checkBoxes = $('[name="fruit"]');

//チェックボックスの状態変化時に処理する
checkBoxes.on('change', () => {

  //チェック済チェックボックス数をカウント
  const isCheckedCount = checkBoxes.filter(':checked');

  isCheckedCount.length > 0
    //カウントが1以上の場合は全チェックボックスのrequired属性を削除する
    ? checkBoxes.attr('required', false)
    //カウントが0の場合は全チェックボックスにrequired属性を付与する
    : checkBoxes.attr('required', true);
});

デモ

バリデーションエラーメッセージを変更する

複数チェックボックスのバリデーションは実装できましたが、デフォルトのエラーメッセージ(※下記スクショ)では「複数のチェックボックスのうちから1つ以上を選択」という意図が伝わりにくそうなのでエラーメッセージを変更します。

JavaScript

const submitButton = $('#submit');
// カスタムエラーメッセージ
const errorMessage = 'いずれか1つ以上を選択してください。';

// 送信ボタン押下時に処理を開始する
submitButton.on('click', () => {

  // invalidイベント発火
  checkBoxes.on('invalid', (e) => {

    // 値が正常か無効かを判定する
    const isInvalid = e.target.validity.valueMissing;

    isInvalid 
      // 無効の場合はエラーメッセージを設定する
      ? e.target.setCustomValidity(errorMessage)
      // 正常な場合はエラーメッセージを空にする
      : e.target.setCustomValidity('');
  });
});

要素.on('invalid', () => {})

バリデーションエラーが発生すると該当の要素でinvalidイベントが発火するのでイベントハンドラでキャッチします。

要素.validity.valueMissing

validity: ValidityState {
  badInput: bool
  customError: bool
  patternMismatch: bool
  rangeOverflow: bool
  rangeUnderflow: bool
  stepMismatch: bool
  tooLong: bool
  tooShort: bool
  typeMismatch: bool
  valid: bool
  valueMissing: bool
}

要素はそれぞれ入力内容の検証結果を格納したvalidityStateオブジェクトを持っています。

プロパティの1つであるvalueMissingは入力値がエラーの場合にtrueを返します。

参照：ValidityState - Web API | MDN

要素.setCustomValidity(string)

setCustomValidity()メソッドでエラーメッセージを変更します。

メソッドにメッセージが設定されている場合は検証エラー状態にしてメッセージを表示します。

メッセージが設定されている限りエラー状態となり送信できないので、エラーがない場合は空文字を設定する必要があります。

参照：HTMLInputElement: setCustomValidity() メソッド - Web API | MDN

デモ

ソースコード全体

HTML

<form>
    <label>
      <input type="checkbox" name="fruit" required="required">りんご
    </label>
    <label>
      <input type="checkbox" name="fruit" required="required">みかん
    </label>
    <label>
      <input type="checkbox" name="fruit" required="required">ばなな
    </label>
    <button id="submit">送信</button>
</form>

JavaScript

const checkBoxes = $('[name="fruit"]');
const submitButton = $('#submit');
const errorMessage = 'いずれか1つ以上を選択してください。';

checkBoxes.on('change', (e) => {
  const isCheckedCount = checkBoxes.filter(':checked');
  isCheckedCount.length > 0
    ? checkBoxes.attr('required', false)
    : checkBoxes.attr('required', true);
});

submitButton.on('click', () => {  
  checkBoxes.on('invalid', (e) => {
    const isInvalid = e.target.validity.valueMissing;
    isInvalid
      ? e.target.setCustomValidity(errorMessage)
      : e.target.setCustomValidity('');
  });
});

まとめ

以上、複数チェックボックスのバリデーション実装方法とバリデーションエラーメッセージの変更方法を解説しました。

標準で備わっているform validationを実務で使う際には、

・ブラウザ毎にデフォルトのエラーメッセージが違う

・ブラウザ毎にポップアップのスタイルも違う

・ポップアップのスタイルはcssで制御できないのでサイトのトンマナと合わない可能性がある

・結局入力値の本格的な検証はサーバサイドでの処理が必須

などなど、考慮しなくてはならない点がいくつもありますが、クライアントサイドで手軽にバリデーションを実装したい場合などには手っ取り早いうえに有効な手段です。

◇

株式会社GIGは、ナショナルクライアントからスタートアップまで、Webコンサルティング、UI/UXデザイン、システム開発など、DX支援をおこなうデジタルコンサルティング企業です。また、45,000人以上が登録するフリーランス・副業向けマッチングサービス『Workship』や、7,000人以上が登録するデザイナー特化エージェントサービス『クロスデザイナー』、リード獲得に必要な機能を備えたCMS『LeadGrid』、UXコンサルティングサービス『UX Design Lab』などを展開しています。

WebやDX支援のご相談はいつでもご連絡ください。

Web制作/Webマーケティングに関するご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です！少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

奥村 洋亮

フロントエンドエンジニア。会社員、起業、個人事業などを経て2018年5月にGIGにジョイン。現在も個人事業主兼GIGメンバーとしてWeb制作に携わっている。