Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

フォームバリデーションライブラリParsley.jsでリアルタイムバリデーションを行う

JavaScriptのフォームバリデーションライブラリParsleyで入力と同時にバリデーションを行う方法を、3通り紹介します。

※Parsley v2.7.2で動作確認しています。
※Parsley.jsはJSからの起動と、HTMLにデータ属性をつけての起動が選べますが、今回は後者のやりかたを前提とします。
※今回バリデーション発火のイベントとしてkeyup focusout change inputの4つを設定しています。

<input>等のフィールドに個別にdata-parsley-trigger属性を設定

公式ドキュメントのUI for fieldの項でも解説されてたり、公式のExampleでも使われてたりしていて、きっと最初にたどり着く方法。

<form data-parsley-validate>
    <input type="text" required placeholder="テキストを入力してください" data-parsley-trigger="keyup focusout change input">
    <input type="email" required placeholder="メールアドレスを入力してください" data-parsley-trigger="keyup focusout change input">
    <button type="submit">submit</button>    
</form>

デモ

<form>タグにdata-parsley-trigger属性を設定

一番目の方法だと各フィールドにそれぞれ記載する必要があり、フィールドが多いとかなり重複する記述が増えてきてしまいます。
フィールドごとに動作をわける必要がないなら<form>につけてしまったほうが楽です。

<form data-parsley-validate data-parsley-trigger="keyup focusout change input">
    <input type="text" required placeholder="テキストを入力してください">
    <input type="email" required placeholder="メールアドレスを入力してください">
    <button type="submit">submit</button>    
</form>

デモ

Parsley.options.triggerを上書きする

フォームがサイト全体で複数個出て来るような場合、2番目の方法でも「なんだか汚いなあ」という気持ちになってきます。
Parsleyのデフォルト設定を上書きすると、上書きの記述のあるJSが読み込まれているすべてのページのフォームに対してリアルタイムバリデーションを設定できます。
公式ドキュメントのOverviewの項にちょろっとデフォルト設定への言及がありますが、このやりかたに気づくのに3ヶ月かかりました。。
記述はたったの1行。

Parsley.options.trigger = "keyup focusout change input";

デモ


というわけで、3通りの方法を紹介しましたが、3番目で紹介した1行を、サイト全体で読み込むJSに加えるのが一番スマートなやりかたになりそうです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What are the problem?