同じnameが複数ある場合のValidation

Question

困っていること

以下のコードのように同じnameが３つあるformにて、jQuery Validation を使用してvalidationを行った際、一つ目のnameしか、validationが実行されません。

<form method="post" action="/registration">

<p>好きな本を教えてください</p>
<input type="text" name="favoriteBook" class="favorite-book">
<p>理由を応えてください</p>
<input type="text" name="favoriteReason" class="favorite-reason">


<p>好きな本を教えてください</p>
<input type="text" name="favoriteBook" class="favorite-book">
<p>理由を応えてください</p>
<input type="text" name="favoriteReason" class="favorite-reason">

<p>好きな本を教えてください</p>
<input type="text" name="favoriteBook" class="favorite-book">
<p>理由を教えてください</p>
<input type="text" name="favoriteReason" class="favorite-reason">

var validRules = {
			favoriteBook: {
				required: true,
				maxlength: 64
			},
			favoriteReason: {
				required: true,
				maxlength: 256
			}
		};

var validMessages = {
			favoriteBook: {
				required: "本の名前を入力してください",
				maxlength: "本の名前は64文字以内で入力してください"
			},
			favoriteReason: {
				required: "理由を入力してください",
				maxlength: "理由は256文字以内で入力してください"
			}
	};




var validator = $("#freeTaskFormatForm").validate({
	rules: validRules,
	messages: validMessages,
	
	errorClass: "validate",
	errorPlacement: function(error, element) {
		element.append(error);
	}
}); 

実現したいこと

現在一つ目の項目にしかValidationが実行されないのに対して、3つともにValidationを実行して、errorメッセージを表示できるようにしたいです。

また、nameを配列として書いたり、jQuery Validationのソースを変更せずに、実現したいと考えています。
何か良い方法はないでしょうか。教えていただければ幸いです。

Comments

[yambejp]

絶対にできないとまでは言い切れないので、とりあえず今動くところまでのサンプルをきちんと提示ください。今のサンプルだとなにも判断できません

Answer 1

一つ目のnameしか

HTML上の仕様です。

nameを配列として書いたり、jQuery Validationのソースを変更せずに、実現したい

このままではどうにもできません。
別々のnameつけてバリデータルールも追加してください。

Answer 2

element()メソッドで単一項目のチェックができます。

$('#freeTaskFormatForm').on('submit', function(event) {
  var hasError = false;

  $('#freeTaskFormatForm').find('input').each(function(index, element) {
    hasError |= !validator.element(element);
  });

  if (hasError) {
    event.preventDefault();
  }

  return !hasError;
});

Validator.element()
https://jqueryvalidation.org/Validator.element/

ドキュメントでは引数が Selector となっているという懸念事項がありますが、内部的には $(selector)[0] として使っているので大体大丈夫そうです。