一旦值动态更改,我如何强制jQuery验证重新检查选择/选项字段的值?

问题描述 投票:1回答:1

我是使用jQuery验证的新手程序员。我在更长的表格中有3个相关的下拉菜单(国家,州,城市)。选择/选项下拉菜单和表单元素都可以正常工作。当您尝试预先提交表单时,当然会按预期方式显示验证错误。

我遇到的问题是,当选择一个国家(如南极洲)时,州和城市的选择/选项下拉列表会动态更改为“不可用”。正如预期的那样,国家/地区选择/选项下拉菜单会立即消除错误。但是,该州和城市选择/选项下拉菜单的错误仍然存​​在于页面上。

删除国家/地区/选项下拉错误后,如何立即重新验证州和城市错误。或者,将值更改为文本“不可用”后,动态删除州和城市选择/选项下拉菜单中的错误?注意:如果我分别关注每个州和城市的下拉菜单,这些错误确实会清除。但是,它们不会独立运行。

我将尝试仅在此处粘贴必要的代码。请让我知道是否需要更多。如果可以的话请帮忙。预先谢谢大家。

这是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和Web上研究过的东西,但不幸的是,没有一件事情奏效。这是我最近做过的几次尝试。

我试图在国家/地区选择/选项下拉菜单中添加更改,加高键,聚焦功能。这是尝试使国家/地区的选择/选项更改后重新验证州和城市的下拉菜单。

我还尝试过延迟州和城市的重新确认,因为考虑到国家/地区选择/选项更正后不久需要重新验证州和城市。

jquery jquery-validate
1个回答
0
投票
$('#country').on('change', function() { $(document).on('mousemove', function() { $('#state,#city').valid(); }); });

将此代码放在$(“#signup_form”)。validate({...})之后。如果还有更多字段,请将其放在$('fields_that_need_revalidation')。valid()函数中。我希望这会暂时有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.