classを使ったバリデートの実装とメッセージの出力をまとめました。
wordpressや外部のサービスを使って自動形成されるフォームを使用したときに、idやnameが自動生成で指定出来ない時などにクラスを使ったバリデートの実装が使えます。
<html>
<head>
</head>
<body>
<form>
<select namae="kakegami" class="select_kakegami">
<option value="のし有り">のし有り<option/>
<option value="のし不要">のし不要<option/>
</select>
<input type="text" class="input_naire" />
<input type="submit" />
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script>
$(function(){
$('.input_naire').rules("add",{
required:{
depends: function (element){
return $('.select_kakegami option[value!="のし不要"]').is(':selected');
}
},
message: {
required: "のしをご希望の場合は必ず入力してください。";
}
});
});
</script>
</body>
</html>