もっく日記

書いておぼえるためのブログ

ParsleyJSつかってみた

フォームバリデーションライブラリのParsleyJSをつかってみたのでメモ

使い方

入力必須エラーをだす方法です。

1 npm install

npm install parsleyjs

2 フォームのHTMLを用意

必須項目にrequired=""をつける

<form id="demo-form">
    <label for="fullname">Full Name * :</label>
    <input type="text" name="fullname" required="" class="form-control">
    <input type="submit" value="validate" class="btn btn-default">
</form>

3 JSで.parsley()を実行

//ライブラリの読みこみ
import $ from 'jquery';
import 'parsleyjs';

//実行
$('#demo-form').parsley();

以上で完了です。

↓↓↓ここからは補足

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

公式ドキュメント

http://parsleyjs.org/doc/index.html#psly-validators-list

  • URL入力チェック → type="url" data-parsley-type="url"
  • メールアドレス入力チェック → type="email" data-parsley-type="email"
  • 整数入力チェック → type="number" data-parsley-type="integer"
  • 最大入力文字数チェック → maxlength="6" data-parsley-maxlength="6"

などなど

カスタマイズできること

公式ドキュメント

http://parsleyjs.org/doc/index.html#psly-ui-for-form

バリデーションのタイミングの設定

  • フォーカスした時 →　data-parsley-trigger="focusout"
  • フォーカス外れた時 →　data-parsley-trigger="focusout"

バリデーションの状態によってclassをつける

入力エラーがあったら'parsley-error' 入力エラーがなかったら'parsley-success'を#demo-formにつける (入力エラーがないときだけボタンをクリッカブルにできる)

data-parsley-class-handler="#demo-form"

エラー文言の変更

data-parsley-error-message="エラー文言"

などなど

エラー文言を一括で日本語にする方法

＊各言語のエラー文言は/node_modules/parsleyjs/dist/i18n/に用意されています。（GitHubだとここ）

parsleyjs/dist/i18n/ja.jsを追加で読み込み、 window.Parsley.setLocale('ja');で言語設定を日本語にします。

//ライブラリの読みこみ
import $ from 'jquery';
import 'parsleyjs';
import 'parsleyjs/dist/i18n/ja.js'; //<-追加

//実行
window.Parsley.setLocale('ja');//<-追加
$('#demo-form').parsley();

IE8対応

jqueryのバージョンを1.8以上の1系にして、es5-shimというライブラリを読み込むようにすればIE8でもつかえます。

のはずがIE8でエラーがでた

jQueryのところで「識別子、文字列または数がありません。」というエラーがでました。

↓ここのdefaultのところがよくないらしいです

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _jquery2.default)('#apply-form').parsley();

解決方法

Browserify&Babelの開発環境でimportで読み込みしてたのが原因らしいとのことだったので、importで読み込むのをやめてrequireで読み込むようにしたら解決しました。

import $ from 'jquery';

を

const $ = require('jquery');

Browserifyのバージョンアップでそのうち解消されるかもしれませんが。