Fatal编程技术网
  • javascript/
  • Javascript jQuery工具验证程序，如何使其与动态添加的元素一起工作？

Javascript jQuery工具验证程序，如何使其与动态添加的元素一起工作？

javascript jquery validation

Javascript jQuery工具验证程序，如何使其与动态添加的元素一起工作？,javascript,jquery,validation,jquery-tools,Javascript,Jquery,Validation,Jquery Tools,我正在尝试使用jQuery工具验证器来实现表单验证 我的表单并不简单，它由两个步骤组成： 显示初始字段，初始化验证器以确保输入正确的值并填写必填字段 在提供所有字段值并单击submit按钮后，我执行json请求，并根据结果添加具有相应验证属性的新输入字段，然后取消submit操作。单击带有新字段的按钮时，将提交表单 问题是验证器似乎不知道要验证的新输入。如何刷新它并使验证器知道动态添加的输入 我试过了 form.data("validator").destroy(); form.validato

我正在尝试使用jQuery工具验证器来实现表单验证

我的表单并不简单，它由两个步骤组成：

  • 显示初始字段，初始化验证器以确保输入正确的值并填写必填字段
  • 在提供所有字段值并单击submit按钮后，我执行json请求，并根据结果添加具有相应验证属性的新输入字段，然后取消submit操作。单击带有新字段的按钮时，将提交表单
    • 问题是验证器似乎不知道要验证的新输入。如何刷新它并使验证器知道动态添加的输入

    我试过了

    form.data("validator").destroy();
form.validator();
    但是没有运气

    有什么建议吗？

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

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

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

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

    我很想使用unbind函数（）的强大功能来解决这个问题。这个解决方案的好处在于我们不必手动将新添加的字段附加到validator对象。完整代码如下所示：

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

    您可以尝试使用此代码使功能更具动态性。请欣赏：）

    同意这是一种更干净的验证方法，尤其是我建议的方法不适用于对动态添加的元素执行invalidate（）调用。谢谢你的代码示例！ 
    <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>

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