6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

jQuery validation

はじめに

クライアント側のエラーチェックですが、
jquery validationはよく使っているようです。
私も久しぶり再度使ってみました。

ラジオボタンとチェックボックスだけ効かない問題がありました。
書き方はドキュメントにあるサンプルと同じ感じでコーディングでした。

調べたら、hidden項目、display:noneの項目はバリデーションをチェックされないことでした。
なるほど、ラジオボタンとチェックボックスのスタイルの関係で非表示に、カスタマイズしたスタイルでラジオボタン、チェックボックスを表示していました。

jquery validation plugin

歴史が長く、成熟度は高いので使いやすいと思います。

標準メソッド

image.png

出典:https://jqueryvalidation.org/documentation/

カスタマイズメソッド

jQuery.validator.addMethod( name, method [, message ] )
addMethodで自分なりのロジックチェックはできます。

hidden,display:noneの項目チェックされない仕様のメリット

hidden,display:noneがチェックしないことで、項目増減がある画面ではとても便利です。
項目消したら、バリデーションの設定を修正する必要がありません。

hidden,display:noneの項目チェックされない仕様の後遺症

上記記載通り、ラジオボタン、チェックボックスなど、display:noneにした場合でもバリデーションをチェックしたい場合があります。

解決方法としては、「display:none」をやめて、「visibility: hidden」に変更。ただし、余分なスペースは調整する必要があります。

Plugin methods

image.png

出典:https://jqueryvalidation.org/documentation/

validate

フォーム単位でルール、メッセージ設定など

rules: 動的追加された項目のrule追加

下記のようにルール追加可能です。

$("input[name='userName']").rules("add", {
     required: true,
     maxlength: 40
});

テキストエリアの動的追加する際に、必須効かない場合があります。
その時は、textarea要素にrequired属性を記載するとうまく動作されます。

ルール削除:

// 部分削除
$( "#age" ).rules( "remove", "min max" );

// 全部削除
$( "#age" ).rules( "remove");

valid

設定したルールによってバリデーションのチェック結果。
・true: エラーなし
・false: エラーあり

以上

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
6
Help us understand the problem. What are the problem?