jQueryのValidationをかける要素をname属性の部分一致で指定する方法

Question

input要素に対してバリデーションをかけたいのですが、対象の要素が多数あるため、name属性の部分一致で指定することが出来れば便利なのですが、可能でしょうか？

バリデーションライブラリはjQuery.Validation v1.17.0とMicrosoft.jQuery.Unobtrusive.Validation v3.2.11です。

<form id="numform">
<input name="num1_1" class="form-control text-box single-line" id="num_1__1" />
<input name="num1_2" class="form-control text-box single-line" id="num_1__2" />
<input name="num1_3" class="form-control text-box single-line" id="num_1__3" />
　　　　　　　　　　　　　・
　　　　　　　　　　　　　・
　　　　　　　　　　　　　中略
　　　　　　　　　　　　　・
　　　　　　　　　　　　　・
<input name="num1_10" class="form-control text-box single-line" id="num_1__10" />

<input name="num2_1" class="form-control text-box single-line" id="num_2__1" />
<input name="num2_2" class="form-control text-box single-line" id="num_2__2" />
<input name="num2_3" class="form-control text-box single-line" id="num_2__3" />
　　　　　　　　　　　　　・
　　　　　　　　　　　　　・
　　　　　　　　　　　　　中略
　　　　　　　　　　　　　・
　　　　　　　　　　　　　・
<input name="num2_10" class="form-control text-box single-line" id="num_2__10" />

</form>
<script type="text/javascript" src="js/jquery.validate.js" ></script>
<script>
    $("#numform").validate({
	errorElement: "span",
	errorClass: "field-validation-valid text-danger",
		rules: {
				num1_1: {
						required: true,
						number: true,
						range: [1, 223]
					}
				},
                               num2_1: {
						required: true,
						number: true,
						range: [200, 223]
					}
				},
		messages: {
				num1_1: {
						required: "入力必須です。",
						number: "数字を指定してください。",
						range: "1から223までの範囲で指定してください。"
					}
				},
                                num2_1: {
						required: "入力必須です。",
						number: "数字を指定してください。",
						range: "200から223までの範囲で指定してください。"
					}
				},
		errorPlacement: function (err, element) {
					element.after(err);
				}
	});
</script>

Comments

[x_x]

「jQuery Validation Plugin」タグをつけてください。

Answer 1

.addClassRules() メソッドで追加できます。

$.validator.addClassRules('single-line', {
  required: true,
  number: true,
  range: [1, 223]
});

https://jqueryvalidation.org/jQuery.validator.addClassRules/

メッセージは個別にローカライズするよりこのファイルを利用したほうがいいでしょう。
https://github.com/jquery-validation/jquery-validation/blob/master/src/localization/messages_ja.js

Comments

[x_x]

言い忘れましたが、同一の class が振られているという前提です。

[j_t]

ご回答ありがとうございます。
参考にさせていただきます。

Answer 2

requiredや条件は手動で指定してメッセージのデフォルト値を調整してみては？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script>
$.extend($.validator.messages, {
required: "入力必須です。",
number: "数字を指定してください。",
min: "1以上を指定してください。",
max: "233以上を指定してください。",
});
$(function(){
  $("#numform").validate();
});
</script>
<form id="numform">
<div><input type="number" name="num1" id="num__1" min="1" max="233" required></div>
<div><input type="number" name="num2" id="num__2" min="1" max="233" required></div>
<div><input type="number" name="num3" id="num__3" min="1" max="233" required></div>
<input type="submit" value="go">
</form>

追記

デフォルトがだめならeachでrulesを付加してみては？

<script>
$(function(){
  $("#numform").validate();
  $("[name^=num]").each(function(){
    $(this).rules("add", {
    required: true,
    messages:{
    required: "入力必須です。",
    number: "数字を指定してください。",
    min: "1以上を指定してください。",
    max: "233以上を指定してください。",    }
    });
  });

});
</script>
<form id="numform">
<div><input type="number" name="num1" id="num__1" min="1" max="233"></div>
<div><input type="number" name="num2" id="num__2" min="1" max="233"></div>
<div><input type="number" name="num3" id="num__3" min="1" max="233"></div>
<div><input type="number" name="not_num"  id="num__4" ></div>
<input type="submit" value="go">
</form>

Comments

[j_t]

ご回答ありがとうございます。
ただ、せっかくコードを書いていただいたところ申し訳ございませんが、私の質問文が悪かった部分があり、こちらの解決したい問題が正確に伝わっていませんでした。直ちに修正いたします。
要素によっては最大値と最小値を変えたいと思っており、共通のメッセージというのが使いづらい状況です。
そのため、バリデーションが共通する要素は、name属性に共通点を持たせて、部分一致で適用たいと考えました。

大変なお手数をおかけしてしまい申し訳ございません。

[yambejp]

nameで判断する（nameがnumから始まる）方法を書いておきましたが
同じクラスがついているならクラスで処理したほうがよいでしょう

ちなみにminやmaxはrulesで指定してもいいですが、
htmlとしての入力制限が有効にならない場合があるので
明示的にinput要素にmin/maxを指定したほうがよいです

[j_t]

ご回答ありがとうございます。
教えていただいた方法で実現出来ました。