copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2017/10/25

Parsley.jsが便利だった話

Written by Shunsuke Okoshi

  • form
  • jQuery

INDEX

    javascriptのフォームのバリデーションツールもいろいろありますが、Parsley.js が割と頭使わずに実装できたのでざっくりとご紹介。
    公式サイト/Github

    インストール

    必須ライブラリは jQuery1.8以上
    ※IE8以下に対応させる場合は es5-shim

    インストールはnpmかダウンロードページから。

    $ npm i parsleyjs
    

    htmlでjQueryとparslery.jsを読み込んで、対象にしたいformタグに data-parsley-validate を入れるだけ。

    <script src="jquery.js"></script>
    <script src="parsley.min.js"></script>
    
    <form data-parsley-validate>
    ...
    </form>
    

    js側で制御したい時は下記のように。

    <script src="jquery.js"></script>
    <script src="parsley.min.js"></script>
    
    <form id="form">
    ...
    </form>
    
    <script>
      $('#form').parsley();
    </script>
    

    使用法

    必須項目でよければ対象フォーム内の該当要素にrequired要素を入れるだけ。

    <input type="text" required>
    

    他に、data-parsley-required でも設定可能。

    • data-parsley-required
    • data-parsley-required=”true”

    その他、あらかじめ設定されているものについてはBuilt-in validatorsを参照してください。
    これだけでも十分な気もしますが、独自の条件を指定することもできます。
      
    多言語対応もされており、i18n(internationalization/ i と n の間に18文字)フォルダの中に結構な数の多言語化ファイルが含まれてます。
    https://github.com/guillaumepotier/Parsley.js/tree/master/dist/i18n

    日本語だったらja.jsja.extra.jsを追加で読み込んでください。

    各種コールバックもEventsに用意されていますが、
    submitを押した時点でValidationが実行されて、エラー文言も編集すれば即時で変更されるので、普通に使う分には特に何もしなくて良さそうです。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View