jQuery validation
はじめに
クライアント側のエラーチェックですが、
jquery validationはよく使っているようです。
私も久しぶり再度使ってみました。
ラジオボタンとチェックボックスだけ効かない問題がありました。
書き方はドキュメントにあるサンプルと同じ感じでコーディングでした。
調べたら、hidden項目、display:noneの項目はバリデーションをチェックされないことでした。
なるほど、ラジオボタンとチェックボックスのスタイルの関係で非表示に、カスタマイズしたスタイルでラジオボタン、チェックボックスを表示していました。
jquery validation plugin
歴史が長く、成熟度は高いので使いやすいと思います。
標準メソッド
出典: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
出典: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: エラーあり
以上
Author And Source
この問題について(jQuery validation), 我々は、より多くの情報をここで見つけました https://qiita.com/chenglin/items/5c9fd7ad0bca070c0af1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .