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

我正在使用jQuery验证插件来验证表单。另外，对于其中一个输入字段的模糊，我想执行一个修改另一个表单元素（选择列表）的函数，但仅当输入字段有效时。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>

至于我可以告诉的问题是，模糊函数被前执行在哪个时间验证。有效返回false，所以我的模糊功能没有任何用处。如果我再次模糊该字段（不修改其值），。有效然后返回true，并根据需要更新我的选择列表。

但我无法弄清楚如何验证窗体（或只是特定的输入栏）如此。有效在首次通过模糊功能时返回true。

对不起，这样一个新问题。

来源

2013-04-28 TonyB

那么为什么不显示你的HTML呢？ – Sparky 2013-04-29 01:11:21

默认情况下，该插件已经验证了“on focus out”。为什么你想在这个上面实现一个'blur'处理程序？ – Sparky 2013-04-29 01:14:01

谢谢Sparky。我有其他的验证规则，但为了简洁起见，它们不在我的示例代码中。我已经添加了它们并示例了html以阐明。我只希望函数在该域的模糊上执行，并且只有在该域的值有效时才执行。这是因为输入字段和选择列表值之间存在依赖关系 - 如果输入字段值更改（且有效），则选择列表必须相应更新，然后由用户重新选择。 – TonyB 2013-04-29 02:30:57

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

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

我希望帮助别人一天。

来源

2013-05-04 02:57:15 TonyB

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

回答

相关问题