jQuery

jQueryによるフォームの検証

イライラ解消!!jQueryによるフォームの検証

イライラ解消!!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>

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

入力項目 HTMLコード
カタカナ入力
 <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">
URL入力
<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"
});
});

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

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

SEOに強いコーディング代行は