最強のフォームチェック用スクリプト［Parsley.js］でフォームにバリデーションを導入して方法

［記事公開日］2019年5月16日

代表取締役

児島大

フォームのバリデーションを導入することができる［Parsley.js］の使い方を解説します。

1 Parsley.jsの導入方法
2 バリデーションの入力コード
- 2.1 必須項目
- 2.2 入力タイプのチェック
3 バリデーションのカスタマイズ

Parsley.jsの導入方法

<head>で必要なファイルを読み込みます

こちらから最新版のファイルをダウンロードしてください。
［Clone or download］をクリックしてます。表示された画面で［Download ZIP］をクリックして、任意の場所にZIPファイルをダウンロードしてください。

ダウンロードしたZIPファイルを解凍します。
解凍できたら、フォルダを開いて下記ファイルを自サーバーにアップロードします。

/dist/parsley.min

<head>内で、jQueryとアップロードしたスクリプトと読み込みます。

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

スクリプトを実行させるコードを記述します

<form>要素にスクリプトを実行するためのコードを記述します。
方法は2種類ありますのでどちらで実装しても構いません。

<form data-parsley-validate>
	<!--バリデーション対象の入力フォーム -->
</form>

<form id="form">
	<!--バリデーション対象の入力フォーム -->
</form> 
<script>
	$('#form').parsley();
</script>

2つめの方法の場合、id名は任意の名前に書き換えできます。

バリデーションしたい要素にコードを記述します

jsの読み込みとスクリプトの実行コードまで書ければ、あとは、バリデーションしたいinputやtextareaなどの各要素にどのようなバリデーションをおこないたいかを記述していくだけです。
どのようなバリデーションがあるのかは次項を確認ください。

バリデーションの入力コード

必須項目

必須項目にしたい場合には、requiredと記述します。

<input type="text" required>
<select required></select>
<textarea required></textarea>

入力タイプのチェック

メールアドレスやURLなど、正しい入力形式かどうかをチェックしたい場合には下記を記述します。

バリデーションのカスタマイズ

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

デフォルトのエラーメッセージは英語で表記されてしまいますので、日本語に変更した場合には、data-parsley-error-message="エラーメッセージを入力"を記述します。

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

デモ

また、エラーメッセージ自体を非表示にしたい場合には、data-parsley-errors-messages-disabledと記述します。

エラーメッセージが表示されるタイミングを変更する

デフォルトでは、エラーメッセージは送信ボタンを押したタイミングで表示されますが、data-parsley-trigger="keyup focusout change input"を記述することでリアルタイムバリデーションが可能になります。

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

デフォルトではエラーメッセージはrequiredを設定したタグのすぐ後ろに挿入されます。この表示位置を変更したい場合は、data-parsley-errors-container="#id名"を記述します。
下記のように記述することで、ラベルの上部にエラーメッセージを表示できます。

<form data-parsley-validate>
	<div id="demo01"></div>
	<label>名前</label>
	<input type="text" required data-parsley-trigger="keyup focusout change input" data-parsley-error-message="名前を入力してください" data-parsley-errors-container="#demo01">
</form>

デモ

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

デフォルトでは、入力された項目がバリデーションされた際に、成功であればclass="parsley-success"、エラーであればclass="parsley-error"がinputなどのバリデーション対象の要素に自動的に記述されます。

<!-- 成功時 -->
<input type="text" class="parsley-success" required data-parsley-trigger="keyup focusout change input" data-parsley-error-message="名前を入力してください">
<!-- エラー時 -->
<input type="text" class="parsley-error" required data-parsley-trigger="keyup focusout change input" data-parsley-error-message="名前を入力してください">

このクラス名をつかい、入力前・エラー時・成功時で背景色に変化をつけることでEFOを改善させることができます。

デモ

このクラス名が記述される要素をほかに変更したい場合には、data-parsley-class-handler="#id名"を記述します。