jquery 验证尚未创建的元素

Posted 2023-05-09

【中文标题】jquery 验证尚未创建的元素

【英文标题】：jquery validate on elements not yet created

【发布时间】：2010-10-14 21:39:58

【问题描述】：

我想知道在最初设置规则时是否可以让 jQuery Validator 插件验证 dom 中尚不存在的元素。

调用 .Rules("add", therules) 方法只会将规则附加到当前存在于 dom 中的元素上。如果我要创造一些。验证不会触发。有什么想法吗？

我正在使用的验证器主页：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

正在通过http://ejohn.org/blog/javascript-micro-templating/创建新元素

基本上有一个ajax调用，服务器返回一堆json（ajaj？），这个json是通过resig的模板引擎提供的。示例模板如下所示：

<script type="text/html" id="ProductsTemplateEdit">
    <td>
        <input type="hidden" value="<#= item.ID #>" id="Edit.ID" name="Edit.ID" />
        <input type="text" value="<#= item.Price#>" id="Edit.Price" name="Edit.Price" />
    </td>
</script>

值显然是通过传入的json填充的。

我还要提一下，我使用的是 xval 验证框架，它基本上会自动为我生成 jquery 验证规则：http://blog.codeville.net/2009/01/10/xval-a-validation-framework-for-aspnet-mvc/

【问题讨论】：

你是如何添加你的项目的？你能提供一个代码示例吗？您还可以在您的问题中链接到您的 jQuery Validator 插件吗？

更多信息的问题更新

【参考方案1】：

好的，试试两个。什么是动态添加元素？你不能把 .Rules("add", ) 放到同一个代码中吗？

【讨论】：

我目前实际上正在使用这种方法，但希望有更好的方法（使用类似于您之前建议的现场活动的方法）。

我认为您当前的方法更“正确”。从您到目前为止所描述的情况来看，您似乎在客户端发生了很多事情。您是否开始注意到性能下降？上次我听说现场活动可能会扼杀表演。

【参考方案2】：

嘿，不确定这是否是不礼貌的黑客行为，但它对我有用。在此之前，我在选择器上执行 each() 并遇到与新创建的 Ajaxed 元素相同的问题。

现场直播的鼠标悬停事件似乎已经成功了，当然你不会对你的 css 感到疯狂：

// >>> MSG/Comment form validator, now and forever...  
    $('form.streamForms').live('mouseover', function()
        $(this).validate(
            rules: 
                text: "required"

            ,
            messages: 
                text: " "
            
        );    
    );

希望对你有帮助！

【讨论】：

或者，您可以收听click 而不是mouseover，如：Validating an AJAX loaded form

如果有人在字段中切换，这不会触发，live() 也不支持焦点事件。

【参考方案3】：

你会想看看 jQuery 1.3 的新 Live Events

【讨论】：

我知道现场活动，但不知道如何调整它们以与 jquery validate 一起使用

从 v1.3.1 live() 开始仅支持以下“可能的事件值：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keyup”

抱歉，我对 Validator 的内部结构并不完全熟悉，但它不应该引发某种自定义事件吗？如果是这样，则可以在这种情况下使用实时事件。

live() 是关于 DOM 事件委托，而不是自定义冒泡的自定义事件。

【参考方案4】：

我是这样处理的。首先我创建了我的验证对象。

var myvalidations = ; myvalidation.registerform = function() $("#registerform").validate( 提交处理程序：函数（表单） $(form).ajaxSubmit(optionspersonal); //提交注册（）； , 规则： 名： 要求：真， 最小长度：5， 最大长度：22 , 消息： 名： 必需：“告诉我们如何称呼您。”, minlength: "您的用户名必须至少包含 5 个字符" );

现在，每当您创建表单时，请确保其上有一个 ID 或在某种程度上可以引用它，并在创建后立即调用您的函数。

//创建我的内容 $('.content').html('--fields etc--'); //添加验证 myvalidation.registerform();

欢迎任何进一步的建议；但我认为基本上这是正确的方法。