jQuery.validation.jsを使ったフォームでチェックによって必須項目の分岐を行う
たとえばチェックボックスAがcheckedの時に、テキストエリアXを必須にする、というようなフォーム間の依存関係なんかは定義できるのでしょうか？
via: https://5509.me/2008/08/22/realtimeformvalidation.html#comments
コメントをもらったので対応方法をメモしておきます。
普通に実行する場合は以下のようになるのですが
$(".validate").validation({
msgs: {
email: "正しいEメールアドレスを入力してください
例：",
submit: "入力が完了していない必須項目があります。
必須項目は全て入力してください。"
},
dialog: {
dialogOpacity: .8
}
});
これは指定のFORM要素に対してvalidationを実行するということなので（そのままですけどｗ
たとえばチェックボックス – 今回はラジオボタンBにしておきますが – がチェックされたときに
テキストボックスAを必須にしたい場合
- ラジオBがチェックされる
- テキストボックスBにaddClass(“required”)する
- validationを実行する際に生成されている要素div.validationTip, div#dlgmat, div#dlgを削除する
- validationを再実行する
の順番で実行していけば、できるようになります。
// 再実行する必要があるので、何度も書かなくていいように変数にしておく
var validateFunc = function(){
$(".validate").validation({
msgs: {
email: "正しいEメールアドレスを入力してください
例：",
submit: "入力が完了していない必須項目があります。
必須項目は全て入力してください。"
},
dialog: {
dialogOpacity: .8
}
});
}
// 読み込み時の実行
validateFunc();
// ここからが本題
$("input[name='radio']").click(function(){
// ラジオボタンがクリックされたときに、それが$("#radio2")なら、指定のテキストボックスにaddClass("required")
if($("#radio2").is(":checked")) $("#other").addClass("required");
// じゃない場合はremoveClass("required")
else $("#other").removeClass("required");
// validationを実行する前に初回読み込み時に生成された要素をすべて削除(かぶるため
$("div.validationTip,div#dlgmat,div#dlg").each(function(){ $(this).remove(); });
// validationを実行する
validateFunc();
});
何か役に立つことがあったらシェアしてみてください
Leave a comment
Trackbacks: 1
- Trackback URL for this entry
- Listed below are links to weblogs that reference
- jQuery.validation.jsを使ったフォームでチェックによって必須項目の分岐を行う from 5509
-
pingback from jQuery.validation.jsを使ったフォームでチェックによって必須項目の分岐を行う | 5509 | 次なるもの [...] original article [...]
Comments: 5 - Leave a comment
初めまして！早速使わせていただいたのですが、質問があります。
ラジオボタンをクリックした時に入力項目をshowにして、それ以外はhideにしているのですが、
その下にもTipsを表示させたい時に、firefoxとgoogleClomeだとTipsがずれてしまいます。
原因は入力項目をhideにしていても、その分の高さをfirefoxとgoogleClomeが認識しちゃっている感じです。IEはまったく大丈夫です。
何かうまい対処法があれば教えて下さいてん。お願いします。
はじめまして。
必須チェック使わせて頂いております。
設置も簡単で諜報しております。
一つお聞きしたいのですが、
ファイルのアップ機能が備わったフォームで、
ファイルをアップする際に、
一つのテキストフィールドを必須にする事は可能でしょうか?
もし可能であれば、方法をご教示頂けますでしょうか。
お手数ですが、何卒よろしくお願いいたします。
はじめまして。こんにちは。
とても素晴らしく、是非、使わせてもらいたいと思っております。
お時間のある時で構いませんので、
1つだけ、全くの初心者の私に教えて頂きたいのです。
この例では、分岐にぶら下っている必須項目が一つですが、
例えば、各ラジオボタンに3つずつ必須項目をぶら下げるには、どの様にすればいいのでしょうか？
はじめまして。遅くなりすみません。。
拡張を一切考えずに実装するなら
$("input[name='radio']").click(function(){ if($("#radio1").is(":checked")){ $('#b1,#b2,#b3').removeClass('required'); $('#a1,#a2,#a3').addClass('required'); }else if($("#radio2").is(":checked")){ $('#a1,#a2,#a3').removeClass('required'); $('#b1,#b2,#b3').addClass('required'); } $("div.validationTip,div#dlgmat,div#dlg").each(function(){ $(this).remove(); }); validateFunc(); });のようにするのが一番簡単だと思います。
サンプルを用意したので確認してみてください
https://5509.me/sample/validation_if/sample02.html
ご親切に記事にまとめていただきましてありがとうございます！
大変勉強になりました。