jQueryによるフォームの検証

こんにちは！ファストコーディングの働くおかんこと、石井です。

急に暑くなったと思ったら肌寒かったり、夏が近いなぁと思っていたら今度は梅雨、、
季節の変わり目って大変ですよね。
特に梅雨の時期はジメッとしていて、湿度は高いし、髪はうねるし、洗濯物は乾かないし、
早く過ぎてほしいと祈るばかりです。
でも、道端のアジサイには毎日癒されています。
私にとっては、この時期一番の楽しみです。

さて、今回はフォームの自動検証についてお話します。
皆さまは、お問い合わせフォームなどのフォームのについて、何か対策をされていますか？
「せっかくフォームまで来たのに、エラーが何度も出て、入力が面倒になって途中でやめてしまう・・・」
「フォームからお問い合わせしてもらったのに、入力の仕方が間違っていて返答ができない・・・」
「自動検証機能付けたいけど、設定が面倒・・・」
こんなご経験はありませんか？

そんなお悩みを持っている方に、今回は、「jQuery form optimizer」をご紹介します。
フォームを自動検証し、入力ミスをなくすのはもちろん、設定も簡単です。

まずは、こちらのリンクから「jQuery form optimizer」をダウンロードしましょう。
https://github.com/fastcoding-jp/form-optimizer

次に、
jquery.form.optimizer.js
jquery.form-optimizer.css
ja_JP.json （日本語の場合）
を、フォームを設置するプロジェクトにコピーしてください。

それでは実際にフォームを設置していきましょう。

Step 1. CSSファイルとJSファイルの読み込み
以下のコードをhtml内に埋め込み、コピーしたCSSファイルとJSファイルが読み込まれるように設定します。
※ディレクトリは、ファイルをコピーした場所を指定してください。

<link rel="stylesheet" href="jquery.form-optimizer.css"/>
<script src="jquery.form.optimizer.js"></script>

Step 2: フォームの作成
html上でフォームを作成します。

<form id="contact_form" class="wrapper">
</form>

入力項目については、必ずクラス名に
fo-item
を付けてください。
また、入力必須項目については、下記のようにクラス名に
fo-required
を付けてください。

<div class="fo-item fo-required"></div>

下記のように、”fo-item” 以下にラベルを追加すると、アラート検証のためにこのラベルが取得されます。

<div class="fo-item fo-required">
  <div class="fo-label">お名前</div>
</div>

ラベルの次に、inputタグを設置します。

<div class="fo-fields">
  <input type="text" class="first" placeholder="例）日本">
  <input type="text" class="second" placeholder="例）太郎">
</div>

入力ミスがあった場合に表示させたいメッセージがある場合は、”fo-errors”というクラス名を付けたdivタグを追加してください。

<div class="fo-errors"></div>

上記をまとめると以下のようなコードになります。

  <div class="fo-item fo-required">
   <div class="fo-label">お名前</div>
   <div class="fo-fields">
    <input type="text" class="first" placeholder="例）日本">
    <input type="text" class="second" placeholder="例）太郎">
    <div class="fo-errors"></div>
   </div>
  </div>

その他の項目については、以下の表を参考にしてください。

        <input type="text" class="fo-katakana first" placeholder="例）二ホン">
        <input type="text" class="fo-katakana second" placeholder="例）タロウ">
        

        <label for="genre-m">男</label>
        <input type="radio" id="gender-m" name="gender" value="m">
        <label for="genre-f">女</label>
        <input type="radio" id="gender-f" name="gender" value="f">
        

        <input type="date" placeholder="例）1980/01/01">
        

        <input type="time" placeholder="例）16:00">
        

<input type="number" placeholder="例）2">

<input type="email" placeholder="例）nihon.tarou@email.co.jp">

<input type="url" placeholder="例）https://homepage.co.jp">

<input type="tel" placeholder="例）080-8080-8080">

<input type="text" class="fo-zipcode" placeholder="例）107-0052">

<select class="fo-region"></select>

<input type="checkbox" id="type-design" name="type" value="design">

<button type="submit" class="fo-submit">送信</button>

Step 3: jQueryについて

コードが読み込まれた後に、「jQuery form optimizer」プラグインを作成するために上記で作成したセレクタフォームを呼び出します。言語ファイル名を入力し、language_path（言語ファイルを置くパスフォルダ）を入力します。

$(function() {
  var selector = $("#contact_form");
  selector.formOptimizer({
    language_path: 'lang/',
    language: "ja_JP"
  });
});

もし日本語以外の言語を使用したい場合は、言語ファイルを開いて直接翻訳してください。

いかがだったでしょうか。
何かご質問がありましたら、お問い合わせフォームよりご連絡ください。
皆さんもどんどん使ってみてくださいね。