Question

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

所以我的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>

据我所知，问题是在验证之前正在执行模糊功能。有效返回false，因此我的模糊功能没有任何用处。如果我再次模糊字段（不修改其值），。有效然后返回true，我的选择列表会根据需要更新。

但是我无法弄清楚如何验证表单（或者只是那个特定的输入字段）。 valid 在第一次通过模糊函数时返回true。

对不起这个新问题。

Answer 1

好的我自己已经解决了这个问题，并会在这里为后人记录解决方案。

我原本以为排队验证和模糊功能存在问题，并试图解决这个问题。我终于发现问题是在验证中远程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);
                   }
              }
         }
    }
)

我希望有一天能帮助别人。

jQuery验证插件和表单字段事件之间的交互

1 个答案: