jQuery validate 插件和表单字段事件之间的交互答案

【问题标题】：Interaction between jQuery validate plugin and form field eventsjQuery validate 插件和表单字段事件之间的交互
【发布时间】：2013-04-28 06:51:42
【问题描述】：

我正在使用 jQuery 验证插件来验证表单。此外，在一个输入字段模糊时，我想执行一个修改另一个表单元素（选择列表）的函数，但前提是输入字段有效。

所以我的 jquery 代码是这样的：

$(document).ready(function()
  {
   $("#form_name").validate(
     {rules: 
        {
         input_field_name: {remote: validation_url}
        ,input_field_name2: {remote: validation_url2}
        }
     ,messages:
        {
         input_field_name: {remote: jQuery.format("Error message")}
        ,input_field_name2: {remote: jQuery.format("Different error message")}
        }
     });
   $("#input_field_name").blur(function()
     {
       if ($("#input_field_name").valid())
         {$.ajax({dataType: "json"
                      ,url: "url_to_get_new_select_list_options"
                     ,data: {input_field_name : $("#input_field_name").val()}
                  ,success: function(data)
                                {
                                 $select_options = $("#example_select_list");
                                 $select_options.empty();
                                 $.each(data.tp, function(key, val)
                                         {$select_options.append('<option id="'+val.id+'">'+val.desc+'</option>')}
                                       )
                                }
                })
          }
     });
  });

我的 html 是这样的：

<form name="form_name" id="form_name" method="post" action="url_to_process_form">
<select name="example_select_list" id="example_select_list">
<option value="">Please select...</option>
<option value="11111">One</option>
<option value="22222">Two</option>
<option value="33333">Three</option>
<option value="44444">Four</option>
<option value="55555">Five</option>
</select>

<input id="input_field_name" type="text" size=10 maxlength=20 name="input_field_name2">
<input id="input_field_name2" type="text" size=10 maxlength=20 name="input_field_name2">   

</form>

据我所知，问题是模糊函数在验证之前执行，此时 .valid 返回 false，所以我的模糊函数没有任何用处。如果我再次模糊该字段（不修改其值），.valid 然后返回 true，我的选择列表将根据需要更新。

但我不知道如何验证表单（或只是那个特定的输入字段），所以 .valid 在第一次通过模糊函数时返回 true。

很抱歉提出这样一个新问题。

【问题讨论】：

那么为什么不显示你的 HTML 呢？
默认情况下，插件已经验证了“on focus out”。您究竟为什么要在此之上实现 blur 处理程序？
谢谢 Sparky。我还有其他验证规则，但为简洁起见，将它们排除在我的示例代码之外。我已经添加了它们和示例 html 来澄清。我只希望该函数在该字段的模糊时执行，并且仅在该字段的值有效的情况下执行。这是因为输入字段和选择列表值之间存在依赖关系 - 如果输入字段值更改（并且有效），则选择列表必须相应更新，然后由用户重新选择。

标签： jquery jquery-validate

【解决方案1】：

好的，我已经自己解决了这个问题，并将解决方案记录在这里以供后人使用。

我最初认为排队验证和模糊功能存在问题，并试图解决这个问题。我终于发现问题是在validate中远程ajax调用有轻微的延迟——当我检查表单字段是否有效时，ajax响应还没有到达。

我使用 setInterval 解决了这个问题，如下所示：

$("#input_field_name").blur(function()
    {
     var intrvl = window.setInterval(checkPendingRequest,1000);
     function checkPendingRequest() 
         {
          if ($.active < 1)  //Checks if there are any open Ajax requests
              {
               if ($("#input_field_name").valid())
                   {$.ajax({dataType: "json"
                                ,url: "url_to_get_new_select_list_options"
                               ,data: {input_field_name : $("#input_field_name").val()}
                            ,success: function(data)
                                {
                                 $select_options = $("#example_select_list");
                                 $select_options.empty();
                                 $.each(data.tp, function(key, val)
                                     {$select_options.append('<option id="'+val.id+'">'+val.desc+'</option>')}
                                 )
                                }
                          })
                    window.clearInterval(intrvl);
                   }
              }
         }
    }
)

我希望有一天能对其他人有所帮助。

【讨论】：