ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

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

      2018/01/26

 - javascript

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

サンプルデモ1

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

公式サイトから必要ファイルをダウンロード
http://parsleyjs.org/doc/download.html

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タグ内のフォームにバリデーションが効きます。

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

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

公式サイトの設定・オプションのページ
http://parsleyjs.org/doc/index.html
公式サイトのデモページ
http://parsleyjs.org/doc/examples.html

必須項目

必須項目には、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

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

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

<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

入力タイプのチェック

メールアドレス data-parsley-type="email"
数字 type="number" data-parsley-type="number"
整数 data-parsley-type="integer"
数字のみ data-parsley-type="digits"
英数字 data-parsley-type="alphanum"
URL type="url" data-parsley-type="url"
最小入力文字数 minlength="6" data-parsley-minlength="6"
最大入力文字数 maxlength="6" data-parsley-maxlength="6"
入力文字数の範囲 data-parsley-length="[6, 10]"
最小値以上 min="6" data-parsley-min="6"
値が特定の正規表現と一致 pattern="\d+" data-parsley-pattern="\d+"
グループ内の特定の最小数のチェックボックスがチェックされているか data-parsley-mincheck="3"
グループ内の特定の最大数のチェックボックスがチェックされているか data-parsley-maxcheck="3"
グループ内のチェックボックスの数が特定の範囲内か data-parsley-check="[1, 3]"
値が別のフィールドの値と同一か(パスワード確認など) data-parsley-equalto="#anotherfield"

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

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

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

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

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

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

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

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

エラーメッセージをデフォルトのものと変更したい場合は、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を記述します。

サンプルデモ2

バリデーション成功・失敗時の状態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>

サンプルデモ3

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

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

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

メールアドレス2(確認)
<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" />

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

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

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

サンプルデモ4

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

ありがとうございます。

「この記事が参考になった」場合はクリックをお願いします。