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

发布于 2024-12-25 06:00:49 字数 384 浏览 4 评论 0原文

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

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

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

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

我尝试过

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

但没有运气。

有什么建议吗？

原文

I am trying to use jQuery Tools Validator to implement the form validation.

My form isn't simple and it consists of two steps:

Initial fields are presented, validator is initialized to make sure right values are entered and required fields are filled.
After all fields values are provided and submit button is clicked, I do json request and depending on the result add new input fields with their corresponding validations attributes and cancel the submit action. When the button is clicked with new fields then the form is submitted.

The thing is the validator doesn't seem to know about the new inputs to validate. how do I refresh it and make validator aware of dynamically added inputs?

I tried

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

But no luck.

Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

任性一次 2025-01-01 06:00:49

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

/* server-side.html file */
<代码>

<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"
}

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

I would love to solve the problem using the power of unbind function( http://api.jquery.com/unbind/ ).The good part of this solution is that we don't have to attach the newly added fields to the validator object manually.The full code is given below:

/* server-side.html file */


<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 file */

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

You can try this code to make the functionality more dynamic.Enjoy :)

回复收藏 0 原文

GRAY°灰色天空 2025-01-01 06:00:49

嗯，正如我所想，新元素不会附加到现有的验证器对象。

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

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

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

这工作得很好。

Well, as I figured new elements are not attached to the existing validator object.

Therefore the way to go was to init validator for new created fields and hook up form's submit event to execute validation from code:

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

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

This worked just fine.

回复收藏 0 原文

~没有更多了~

关于作者

旧街凉风

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。