在动态生成的元素上使用jquery validate插件添加验证规则

问题描述

我正在尝试在从html文字创建的输入中添加一些验证规则.

I am trying to add some validation rules on an input created from html literals.

这是我的小提琴: http://jsfiddle.net/idoxobi/HW4xY/1/

HTML:

<form id='form' method='post' >
    <div id='details'>
    </div>
    <a id='Add' href='javascript:void()'>Add</a>
    <br />
    <input type='submit' />
</form>

JavaScript:

JavaScript:

$(document).ready(function() {
    $('#form').validate();
    var input = "<input type='text' class='item' name='item' />";
    $('#Add').click(function() {
        $('#details').append(input+'<br />');
        $('#details input:last').rules('add', {
            required: true
        });
    });
})

似乎只在第一个元素中识别了该规则，但其他规则未经验证就通过了.

It seems to recognize the rule just in the first element, but the others pass without validation.

这是我第一次使用此插件，但是在论坛中，每个人都说它应该可以正常工作.

Is the first time I use this plug-in, but in the forums everyone says this should work just fine.

有什么建议吗?

推荐答案

检查此内容:

html:

<form id='form' method='post' >
    <div id='details'>
    </div>
    <a id='Add' href='#'>Add</a>
    <br />
    <input type='submit' />
</form>

js:

$(document).ready(function() {
    $('#form').validate();
    var i = 0;
    $('#Add').click(function() {

        var input = "<input type='text' class='item' name='item"+ i++ +"' />";
        $('#details').append(input+'<br />');
        $('#details input:last').rules('add', {
            required: true
        });

        return false;
    });
});

在jsfiddle上

这篇关于在动态生成的元素上使用jquery validate插件添加验证规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！