【jQuery】validate()　をclass名を使って実装 #JavaScript

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>

【jQuery】validate() をclass名を使って実装

【jQuery】validate()　をclass名を使って実装