jQuery 工具验证器，如何使其与动态添加的元素一起使用？答案

【问题标题】：jQuery tools validator, how to make it work with dynamically added elements?jQuery 工具验证器，如何使其与动态添加的元素一起使用？
【发布时间】：2012-01-06 22:15:55
【问题描述】：

我正在尝试使用 jQuery Tools Validator 来实现表单验证。

我的表单并不简单，它包含两个步骤：

显示初始字段，初始化验证器以确保输入正确的值并填写必填字段。
提供所有字段值并单击提交按钮后，我执行 json 请求，并根据结果添加具有相应验证属性的新输入字段并取消提交操作。当单击带有新字段的按钮时，将提交表单。

问题是验证器似乎不知道要验证的新输入。如何刷新它并让验证器知道动态添加的输入？

我试过了

form.data("validator").destroy();
form.validator();

但没有运气。

有什么建议吗？

【问题讨论】：

标签： javascript jquery validation jquery-tools

【解决方案1】：

我很想使用 unbind 函数（http://api.jquery.com/unbind/）的强大功能来解决这个问题。这个解决方案的好处是我们不必手动将新添加的字段附加到验证器对象。完整代码如下：

/* 服务器端.html 文件 */

<html>

<!--
    This is a jQuery Tools standalone demo. Feel free to copy/paste.

    http://flowplayer.org/tools/demos/

    Do *not* reference CSS files and images from flowplayer.org when in production  

    Enjoy!
-->

<head>
    <title>jQuery Tools standalone demo</title>

    <!-- include the Tools -->
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>


    <!-- standalone page styling (can be removed) -->
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   


    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/validator/css/form.css"/>

</head>

<body>


<form id="myform">

   <fieldset>
      <h3>Sample registration form</h3>

      <p> Enter bad values and then press the submit button. </p>
      <p>
         <label>website *</label>
         <input type="url" name="url" required="required" />
      </p>
      <p>
         <label>name *</label>
         <input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" />
      </p>
      <p>
         <label>age</label>
         <input type="number" name="age" size="4" min="5" max="50" />
      </p>

      <p id="terms">
        <label>I accept the terms</label>
        <input type="checkbox" required="required" />   
        </p>

      <button type="submit">Submit form</button>
      <button type="reset">Reset</button>
   </fieldset>

</form>


<script>

// initialize validator and add a custom form submission logic
var submitEvent = function(){$("#myform").validator().submit(function(e) {

    var form = $(this);

    // client-side validation OK.
    if (!e.isDefaultPrevented()) {

        // submit with AJAX
        $.getJSON("server-fail.js?" + form.serialize(), function(json) {

            // everything is ok. (server returned true)
            if (json['valid'] === 'true')  {
                if($("#testField").length == 0){
                    $("#terms").before('<p> <label id="testField">email *</label><input type="email" name="email" required="required" /></p>');
                }
                else {
                alert("new field validated successfully");
                }

                form.unbind("submit"); 
                submitEvent();

            // server-side validation failed. use invalidate() to show errors
            } else {
                form.data("validator").invalidate(json);
            }
        });

        // prevent default form submission logic
        e.preventDefault();
    }
});};
submitEvent();
</script>
</body>

</html>

/* server-fail.js 文件 */

{
  "name": "Invalid name. Our apologies",
  "age": "You are too young",
  "valid": "true"
}

您可以尝试此代码以使功能更加动态。享受:)

【讨论】：

同意这是一种更简洁的验证方式，尤其是我提出的方式不适用于动态添加元素的 invalidate() 调用。感谢您提供代码示例！

【解决方案2】：

好吧，我认为新元素没有附加到现有的验证器对象。

因此要走的路是为新创建的字段初始化验证器并连接表单的提交事件以从代码执行验证：

var input =  $("#newDiv :input").validator();

$("#formId").submit(function(e)
{
     input.data("validator").checkValidity();
});

这工作得很好。

【讨论】：