申し込みフォームのエラー表示について（validation.jsについて）

Question

前提・実現したいこと

申し込みフォームのバリデーションについて質問があります。
入力されていないとエラーが出るようにしたいのですが、チェックボックスやラジオボタンの場合、class="required"をどこにつければいいんでしょうか？
inputにつけたら、表示されますが、すべての項目にエラーが出てしまうので一つだけ出したいのです。宜しくお願いします。

<tr> <th class="th"><span>必須</span>&nbsp;〇〇</th> <td class="td"> <label><input type="checkbox" value="〇〇" name="menu1">〇〇</label> <label><input type="checkbox" value="〇〇" name="menu2">〇〇</label></br> <label><input type="checkbox" value="〇〇" name="menu3">〇〇</label> <label><input type="checkbox" value="〇〇" name="menu4" >〇〇</label> </td> </tr>

js
↓
$.extend( $.validator.messages, {
required: "このフィールドは必須です。",

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

<div class="required">でtdを囲んでみたり、<td class="td　required">としてみてもエラー表示あらわれませんでした。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

jquery-validation-1.19.2のプラグインを使用しています。

Answer 1

ありがとうございました。

Answer 2

チェックボックスの例だけ書いておきます。
最低1つチェックされるとvalidationに成功します。
エラーは$('#snack_err')に書かれる形です。

https://jqueryvalidation.org/documentation/

<form id="form">
<input type="checkbox" name="snack" value="1">りんご</input><br>
<input type="checkbox" name="snack" value="2">みかん</input><br>
<input type="checkbox" name="snack" value="3">バナナ</input><br>
<input type="checkbox" name="snack" value="4">マヨネーズ</input><br>
<button type="submit">押す</button>
</form>
<div id="snack_err"></div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
<script>
(function(){
	$('#form').validate({
		rules: {
			'snack': {required: true}
		},
		messages: {
			'snack': {required: "おやつを最低1つ選択してください"}
		},
		errorPlacement: function(error, element){
			if (element.attr('name') === 'snack') {
				$('#snack_err').empty().append(error);
			}
		}
	});
})();
</script>

Answer 3

requiredやpatternの失敗はinvalidイベントで拾われます

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#hoge').addEventListener('invalid',e=>{
    console.log(e.type);
  });
  document.querySelector('#fuga').addEventListener('invalid',e=>{
    console.log(e.type);
  });
});
</script>
<form>
<input type="checkbox" id="hoge" required>
<input type="text" id="fuga" pattern="[0-9]+" required>
<input type="submit" value="send">
</form>