困っていること
以下のコードのように同じnameが3つあるformにて、jQuery Validation を使用してvalidationを行った際、一つ目のnameしか、validationが実行されません。
html
1<form method="post" action="/registration"> 2 3<p>好きな本を教えてください</p> 4<input type="text" name="favoriteBook" class="favorite-book"> 5<p>理由を応えてください</p> 6<input type="text" name="favoriteReason" class="favorite-reason"> 7 8 9<p>好きな本を教えてください</p> 10<input type="text" name="favoriteBook" class="favorite-book"> 11<p>理由を応えてください</p> 12<input type="text" name="favoriteReason" class="favorite-reason"> 13 14<p>好きな本を教えてください</p> 15<input type="text" name="favoriteBook" class="favorite-book"> 16<p>理由を教えてください</p> 17<input type="text" name="favoriteReason" class="favorite-reason"> 18
javascript
1var validRules = { 2 favoriteBook: { 3 required: true, 4 maxlength: 64 5 }, 6 favoriteReason: { 7 required: true, 8 maxlength: 256 9 } 10 }; 11 12var validMessages = { 13 favoriteBook: { 14 required: "本の名前を入力してください", 15 maxlength: "本の名前は64文字以内で入力してください" 16 }, 17 favoriteReason: { 18 required: "理由を入力してください", 19 maxlength: "理由は256文字以内で入力してください" 20 } 21 }; 22 23 24 25 26var validator = $("#freeTaskFormatForm").validate({ 27 rules: validRules, 28 messages: validMessages, 29 30 errorClass: "validate", 31 errorPlacement: function(error, element) { 32 element.append(error); 33 } 34}); 35
実現したいこと
現在一つ目の項目にしかValidationが実行されないのに対して、3つともにValidationを実行して、errorメッセージを表示できるようにしたいです。
また、nameを配列として書いたり、jQuery Validationのソースを変更せずに、実現したいと考えています。
何か良い方法はないでしょうか。教えていただければ幸いです。
回答2件
あなたの回答
tips
プレビュー