Как заставить проверку jQuery перепроверить значение поля select / option после динамического изменения значения? - PullRequest
1 голос
/ 28 марта 2020

Я новичок ie, использующий проверку jQuery. У меня есть 3 зависимых выпадающих списка (страна, штат, город) внутри гораздо более длинной формы. Выпадающие меню select / option и элементы формы работают без fl aws. Когда вы пытаетесь предварительно отправить форму, конечно, как и ожидалось, отображаются ошибки проверки.

Проблема, с которой я сталкиваюсь, заключается в том, что при выборе страны, такой как Антарктида, раскрывающиеся списки выбора и опции штата и города динамически изменяются на , "нет в наличии". Как и ожидалось, выпадающий список выбора страны / опции немедленно удаляет ошибку. Однако ошибки для раскрывающихся списков выбора / выбора штата и города по-прежнему сохраняются на странице.

Как получить ошибки штатов и городов для повторной проверки немедленно после удаления ошибки раскрывающегося списка выбора / варианта страны. Или динамически удалять ошибки в выпадающих списках штата и города / опции, когда значение меняется на текст «недоступен»? Примечание: если я сфокусируюсь на каждом из выпадающих списков штатов и городов независимо, ошибки все же исчезнут. Тем не менее, они не будут самостоятельно.

Я постараюсь вставить здесь только необходимый код. Пожалуйста, дайте мне знать, если нужно больше. Пожалуйста, помоги, если можешь. Спасибо всем заранее.

Это html разметка:

 <form id="signup_form">
    <fieldset>
        <ul>
           <li>                                                           
               <fieldset id="countryfieldset">                                                               
                  <label>Country</label>
                  <select id="country" class="country" name="country"> 
                     <?php include("../countryAjaxData.php"); ?>
                  </select>
                     <label>State</label>
                  <select id="state" class="state" name="state">
                     <option value="" selected="selected">Select State</option>
                  </select>                                                            
                     <label>City</label>
                  <select id="city" class="city" name="city">
                     <option value="" selected="selected">Select City</option>                                                               
                  </select>                         
             </fieldset>
          </li> 
          <li><input type="submit" id="signup_now_index1"></li>
       </ul>
    </fieldset>
 </form>

Это плагин jQuery .validation:

      $(document).ready(function() {
        "use strict";   

    $.validator.setDefaults( {
        submitHandler: function() {     

        }
    });


    $("#signup_form").validate( {
        rules: {            

            country: {                  
                required: true
            },

            state: {                    
                required: true
            },

            city: {
              required: true
            },
        },

        messages: { 

            country: "Required",

            state: "Required",

            city: "Required",
        },

        onkeyup: function(element) {
            if (!this.checkable(element)) {
                this.element(element);
            }
        },

        onfocusout: function(element) {
            if (!this.checkable(element)) {
                this.element(element);
            }
        },

        ignore: ".ignore, :hidden",

        errorElement: "div",

        errorPlacement: function (error, element) {
            var type = $(element).attr("type");
            if (type === "radio") {
                error.insertAfter(element).wrap('<div/>');
            } else if (type === "checkbox") {
                error.insertAfter(element).wrap('<div/>');
            } else {
                error.insertBefore(element).wrap('<div class="error_container"/>');
            }
        },

        success: function (li, element, validClass) {               

        },

        highlight: function (element, errorClass, validClass) {

        },

        unhighlight: function (element, errorClass, validClass) {

        },

        showErrors: function (errorMap, errorList) {
            this.defaultShowErrors();
        },

    });

     //These are a few of my many failed attempts.

    //$('#country').on('change keyup', function(){
    //  var validator = $( "#signup_form" ).validate();
    //  validator.element( "#state" );
    //$('#state').valid();
    //});
    //$('#country').on('change keyup', function(){
    //  $('#state').valid().delay(5000);
    //});


});

У меня есть также пробовал много вещей, которые я исследовал на SO и в Интернете, но, к сожалению, ни одна из них не сработала. Это последние две попытки, которые я предпринял.

Я попытался добавить функцию изменения, настройки ключа, фокуса в раскрывающемся меню выбора страны / опции. Это была попытка заставить выпадающие списки выпадения штатов и городов после изменения выбора / опции страны.

Я также пытался задержать переосмысление штатов и городов. что штат и город должны были быть повторно проверены вскоре после того, как выбор / опция страны была исправлена.

1 Ответ

1 голос
/ 05 апреля 2020

Поскольку вы не получили никаких ответов, я подумал, что постараюсь помочь. Я абсолютно не рядом с профессионалом. Я также новый кодер. Но я использовал этот очень, очень хакерский метод, который может работать на вас. У меня довольно недавно была похожая проблема, когда поле, которое нужно было повторно проверить, не делало это автоматически при обновлении другого поля. Что я сделал, так это поместил функцию перемещения мыши внутри функции изменения. Таким образом, если и когда первое поле было изменено, любое последующее перемещение мыши заставит второе поле проверяться. Для пользователя это выглядит незаметно, но это не лучший ответ. Я sh Я знал лучший метод, но я поделюсь с вами моим текущим методом. Надеюсь, кто-то еще здесь, на SO, может дать нам оба лучший метод работы.

    $('#country').on('change', function() {
        $(document).on('mousemove', function() {
            $('#state,#city').valid();
        });
    });

Поместите этот код после вашего $ ("# signup_form"). Validate ({...}). Если полей больше, поместите их в функцию $ ('fields_that_need_revalidation'). Valid (). Надеюсь, это пока поможет.

...