Плагин проверки Jquery и переключение обязательного поля

Question

Да, в основном, я создаю веб-форму, которая должна предоставлять различные требуемые формы и функции проверки, соответствующие выбранной стране.

Я использую

<script type="text/javascript" src=" jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src=" jquery.validate.js" charset="utf-8"></script>

и вот мой код JS

 <script type="text/javascript" charset="utf-8">
 function updatRequreForm (STATE,ZIPCODE) {
    $("#frm_verification").validate({
            rules: {
              'form[country]' : "required",
              'form[state]' : {required: STATE},
              'form[zip]': {required: ZIPCODE},
               },

            messages: {
              'form[country]' : "This field is required.",
              'form[state]' : "This field is required.",
              'form[zip]': "This field is required.",
      });
 };


 function setRequreForm () {
    var _cs = $('#country_select')[0];

    if ('US' != _cs.value)
    {
        $('#state_star')[0].innerHTML = '';
        $('#zip_star')[0].innerHTML = '';
        updatRequreForm (false,false);
    }
    else
    {
        $('#state_star')[0].innerHTML = '*';
        $('#zip_star')[0].innerHTML = '*';
        updatRequreForm (true,true);
    }
 };    


 $(document).ready(function() {
    setRequreForm ();
    $('#country_select').change(function(){
        setRequreForm ();
    });
 });

</script>

Вот мой HTML:

<form id="frm_verification" action="some.php" method="POST">

<label for="country_select"><sup>*</sup>Country:</label>
<select name="form[country]" id="country_select">
    <option value="">- Select -</option>
    <option value="US" selected="selected">United States</option>
    <option value="ZM">Zambia</option>
    <option value="ZW">Zimbabwe</option>
</select>


<label for="select-state"><sup id="state_star">*</sup>State/Province/Region:</label>
    <span id="states_select">
        <select id="select-state" name="form[state]">
            <option value="">- Select -</option>
            <option value="AK">Alaska</option>
        </select>
    </span>

    <span id="states_text" style="display:none;">
    <input type="text" name="form[state]" value="" id="state" />
    </span>

<label for="zip_code"><sup id="zip_star">*</sup>ZIP/Postal Code:</label>
<input type="text" id="zip_code" name="form[zip]" value="" id="zip">

<input type="submit" value="Submit" id="submit_btn" class="submit">
</form>

По сути, мне нужно создать:

1.When user select US on country selection, the State and Zip area become required.
2.When user select Zambia on country selection, the State and Zip area become non-required.

Задача

Когда я впервые загружаю страницу и нажимаю кнопку «Отправить» с пустым полем, форма успешно проверяет каждое поле и показывает предупреждение. Однако при выборе Замбии проверка не работает.

Guess

Я удалил «setRequreForm ();» в функции готовности, например:

$(document).ready(function() {
  //setRequreForm ();
    $('#country_select').change(function(){
        setRequreForm ();
    });
 });

И попытался выбрать Замбию, и попытался проверить форму, и она работает. Поэтому я думаю, что вызов «validate ()» дважды вызывает ошибку. Ну, я застрял на некоторое время. Пожалуйста, помогите мне разобраться в этом, я буду очень признателен.

Answer 1

Вы не можете вызвать validate больше, чем те, потому что вы запускаете плагин validate больше чем один, и это приводит к ошибкам.

Вы можете настроить свой валидатор так:

$("#myform").validate({
   ignore: ".ignore"
})

Ignore сообщает валидатору: поле, в котором игнорируется класс css, проверять не следует.

При изменении требований добавьте в указанные поля класс css "ignore":

$("#field1").addClass("ignore");

в противном случае удалить этот класс:

$("#field2").removeClass("ignore");