Parsley.jsの使い方～かなり汎用性ありのバリデーションoption・日本語

javascriptのフォームのバリデーションjQueryプラグイン「Parsley.js」の使い方、設置方法をまとめます。フォームのバリデーションは色々ありますが、かなり汎用性があって設置もしやすいです。カスタマイズやオプションの設定なども説明しています。

⇒サンプルデモ１

Parsley.jsの使い方、設定方法

jQueryとParsley.orgよりダウンロードしたファイルのdistのフォルダからparsley.min.jsを読み込みます。minファイルは圧縮版なのでこちらで大丈夫です。jqueryも併せて読み込みます。

jsの読み込み

<script src="js/jquery.js"></script>
<script src="js/parsley.min.js"></script>

バリデーションのデザインをデフォルトのものを使用したい場合は、srcフォルダのparsley.cssを併せて読み込みます。エラーメッセージを日本語化したい場合は、distのフォルダ内のi18nフォルダのja.js、ja.extra.jsも併せて読み込みます。

バリデーション実行タグ

<form data-parsley-validate>
・
・
・
</form>

もしくは以下のスクリプトを記述

<form id="form">
・
・
・
</form>
 
<script>
 $('#form').parsley();
</script>

どちらでもOKです。
これで対象のformタグ内のフォームにバリデーションが効きます。

バリデーションチェックできる項目の設定

フォームの項目にバリデーションチェックの設定を行います。

必須項目

必須項目には、requiredを記述します。

<input type="text" required>

<select required></select>

<textarea required></textarea>

以下でもOKです。
required=””
data-parsley-required
data-parsley-required=”true”

ラジオボタンの必須項目

<p>
 <input type="radio" name="gender" required>男
 <input type="radio" name="gender">女
</p>

同じnameを設定して、最初のタグにrequired

チェックボックスの必須項目

最低２つチェックが入っているかのチェック

<p>
 <input type="checkbox" name="fruit" data-parsley-mincheck="2" required>りんご<br>
 <input type="checkbox" name="fruit">みかん<br>
 <input type="checkbox" name="fruit">バナナ<br>
 <input type="checkbox" name="fruit">スイカ<br>
 <input type="checkbox" name="fruit">レモン<br>
</p>

同じnameを設定して、最初のタグにrequired

入力タイプのチェック

複雑なパターンは公式のデモページでいくつか用意されているので参考にできます。

ひらがな・カタカナのチェック

公式のページを見てもひらがな、カタカナのチェックを行う設定が見つけられなかったのですが、HTML５から新しく登場した「pattern」属性でなんとかいけましたので参考にしてください。

<input type="text" pattern="[\u3041-\u3096]*" data-parsley-required data-parsley-error-message="ふりがなを入力してください" data-parsley-trigger="focusout">

全角カタカナ・・・pattern="[\u30A1-\u30F6]*"
全角ひらがな・・・pattern="[\u3041-\u3096]*"

バリデーションの表示カスタマイズ設定

入力項目１つづつ個別にバリデーション設定を行う方法を解説します。

エラーメッセージの文言変更

エラーメッセージをデフォルトのものと変更したい場合は、data-parsley-error-messageを記述します。

<input type="text" required data-parsley-error-message="名前を入力してください">

エラーメッセージを表示させたくない場合、data-parsley-errors-messages-disabledを記述します。

<input type="text" required data-parsley-errors-messages-disabled>

バリデーションのタイミングを変更

エラーメッセージでるタイミングを変更したい場合は、data-parsley-triggerを記述します。

<input type="text" required data-parsley-error-message="名前を入力してください" data-parsley-trigger="keyup focusout change input">

focusin←フォーカスしたとき
focusout←フォーカスが外れたとき
keyup focusout change inputを記述するとリアルタイムでバリデーションできます。

ほかにもjQueryでサポートされているイベントで設定できるものもあります。

エラーメッセージの表示位置を変更

デフォルトではエラーメッセージはrequired設定したタグの次に挿入されます。表示位置を変更したい場合は、data-parsley-errors-containerを記述します。

<input type="text" required data-parsley-error-message="名前を入力してください"　data-parsley-trigger="focusout" data-parsley-errors-container="#error-name">
・
・
<div id="error-name"></div>←設置したい場所に配置

data-parsley-errors-containerに設定する内容は、表示させたい位置に挿入するタグのidを記述します。

⇒サンプルデモ２

バリデーション成功・失敗時の状態class位置を変更

デフォルトでは入力した項目がバリデーションされたときに、成功であればparsley-success、エラーであればparsley-errorがタグのclassに付与されます。（成功・失敗時にデザインを変えたりできるように）

成功時

<input type="text" required data-parsley-error-message="名前を入力してください" class="parsley-success">

失敗時

<input type="text" required data-parsley-error-message="名前を入力してください" class="parsley-error">

その表示位置を変更したい場合は、data-parsley-class-handlerを記述します。

<div id="element-name">
<input type="text" required data-parsley-error-message="名前を入力してください"　data-parsley-trigger="focusout" data-parsley-class-handler="#element-name">
・
・
</div>←id付与したいタグにidを記述

data-parsley-class-handlerに設定する内容は、付与させたいタグに挿入するidを記述します。
※class,idどちらでもいけます。

公式の解説ページにはほかにもオプション設定があります。

フォーム全体に同じ設定を適用したい場合

上記まではタグ個別に設定する方法を記載しましたが、フォーム全体に同じ設定を適用したい場合はformタグに記述することで一括適用できます。

↓バリデーションのタイミングを一括で指定する場合

<form data-parsley-validate data-parsley-trigger="keyup focusout change input">
・
・
・
</form>

フォームの上部にエラーメッセージを表示する場合

エラーメッセージの場所以外に、入力内容が正しい、間違っているを表示させたい場合は、以下のスクリプトとタグをページ内に記述する。

↓入力が間違っている場合に表示させる内容、ページ内に記述）
<div class="bs-callout bs-callout-warning hidden">
<h4>入力がどこか間違っているよ!</h4>
<p>エラーの箇所を見直してね</p>
</div>

↓入力が正しい場合に表示させる内容、ページ内に記述）
<div class="bs-callout bs-callout-info hidden">
<h4>全部入力正しいよ!</h4>
<p>問題なく入力完了しました。</p>
</div>

↓ページ内にスクリプトを記述
<script type="text/javascript">
$(function () {
$('#sample-form').parsley().on('field:validated', function() {
var ok = $('.parsley-error').length === 0;
$('.bs-callout-info').toggleClass('hidden', !ok);
$('.bs-callout-warning').toggleClass('hidden', ok);
})
});
</script>

⇒サンプルデモ３

メールアドレス１と２の入力内容を確認する場合

メールアドレスの入力確認やパスワードの入力確認で同じ内容を２回入力させる場合には以下の方法で行えます。

メールアドレス１
<input type="email" data-parsley-required data-parsley-error-message="メールアドレスを入力してください" data-parsley-type="email" id="email1" />

メールアドレス２（確認）
<input type="email" data-parsley-required data-parsley-equalto-message="メールアドレスが間違っています" data-parsley-type-message="false" data-parsley-required-message="メールアドレスを入力してください" data-parsley-type="email" data-parsley-equalto="#email1" />

メールアドレス１にid=”email1″を付与し、メールアドレス２にdata-parsley-equalto=”#email1″を指定します。これで１と内容があっているかの確認を行えます。

そしてこうした場合、エラーメッセージが複数表示されますので、対象のエラーメッセージも指定します。

・１と２があっているかのエラーメッセージ、data-parsley-equalto-message
・必須項目のエラーメッセージ、data-parsley-required-message
・メールアドレスの形式があっているかのエラーメッセージ、data-parsley-type-message=”false”（falseを指定すると表示をなくせます）

⇒サンプルデモ４

参考にさせて頂いたページ

ありがとうございます。

• Parsley.jsが便利だった話 | 株式会社 エヴォワークス -EVOWORX-
• ParsleyJSつかってみた – もっく日記
• フォームバリデーションライブラリParsley.jsでリアルタイムバリデーションを行う – Qiita
• [HTML5]input pattern｜ひらがな・カタカナ・日本語をpatternであらわす正規表現 – TrippyBoyの愉快な日々