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"
  });
});

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

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