Warum nicht jquery Validierung für abhängige auswählen?

Question

Ich habe Formular mit abhängiger Auswahl. Und ich brauche mit jquery validation überprüfen, was jeweils abgeschlossen auswählen. Wählen Sie als zweites aus dem Server mit ajax abrufen.

... 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> 

und meine Validierung:

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

Aber ich bekomme immer Ergebnis für nicht Fall wählen. Wie man Regeln für die Felder country und city für korrekte Arbeit repariert. Wenn etwas ausgewählt ist, das nicht voreingestellt ist, ist es ein gültiger Fall, wenn ein Feld nicht den ungültigen Fall nur für das nicht ausgewählte Feld auswählt. Danke.

Answer 1

Sie funktioniert einfach die Klasse Attribut required auf beiden select-Element hinzufügen könnte.

wie folgt vor:

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

Bitte beachten Sie folgendes Beispiel:

$("#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>

Ich hoffe, es hilft Ihnen, bye.

Answer 2

dieses Beispiel überprüfen und lassen Sie mich wissen, ob es für Sie

$("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>