従属選択に対してjquery検証を動作させないのはなぜですか？

Question

私は従属選択のフォームを持っています。そして、私はjquery validationそれぞれの選択が完了するのを確認する必要があります。 2番目のサーバから取得するにはajaxを選択します。

... more fieldes ... 
Select Country: 
<label for="country"></label><br /> 
<select id="country" name="country"> 
    <option value="">Select Country</option> 
    <option value="USA">USA</option> 
    <option value="Israel">Israel</option> 
</select> 
<br /> <br /> 

Select City: 
<label for="city"></label><br /> 
<select id="city" name="city"> 
    <option value="">Select City</option> 
</select> 

そして、私の検証：

country: { 
    required: true, 
    minlength: 2 
}, 
city: { 
    required: true, 
    minlength: 2 
} 

しかし、私は常にケースを選択していないためになります。正しい作業のためにフィールドcountryとcityのルールを修正する方法。デフォルト以外の何かを選択した場合、有効な場合です。選択されていないフィールドが選択されていないフィールドに対してのみ無効な場合です。ありがとうございました。

Answer 1

のために働くなら、私に知らせてください。

次のように：私はそれはさようなら、あなたを役に立てば幸い

$("#btnValidate").click(function() { 
 
    console.log("Form is valid:", $("#frm1").valid()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script> 
 
<form id="frm1"> 
 
    Select Country: 
 
    <label for="country"></label><br /> 
 
    <select id="country" name="country" class="required"> 
 
    <option value="">Select Country</option> 
 
    <option value="USA">USA</option> 
 
    <option value="Israel">Israel</option> 
 
    </select> 
 
    <br /> <br /> 
 

 
    Select City: 
 
    <label for="city"></label><br /> 
 
    <select id="city" name="city" class="required"> 
 
    <option value="">Select City</option> 
 
    <option value="T1">Test 1</option> 
 
    <option value="T2">Test 2</option> 
 
    </select> 
 
    <p> 
 
    <input type="button" id="btnValidate" value="Validate"> 
 
    </p> 
 
</form>

：

<select id="country" name="country" class="required"> 

を次の例を参照してください。

Answer 2

チェックこの例を、それはあなたが単に両方のselect要素にclass属性requiredを追加することができます

$("form").validate({ 
 
    rules: { 
 
     country: { required: true }, 
 
     city: { 
 
      required: { 
 
       depends: function(element) { 
 
        return $("#country option:selected").val(); 
 
       } 
 
      } 
 
     } 
 
    }, 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<form> 
 

 
<select id="country" name="country"> 
 
    <option value="">Select Country</option> 
 
    <option value="USA">USA</option> 
 
    <option value="Israel">Israel</option> 
 
</select> 
 

 
<select id="city" name="city"> 
 
    <option value="">Select City</option> 
 
    <option value="Newyork">Newyork</option> 
 
</select> 
 
<input type="submit"> 
 
</form>