Question

如何验证动态创建的文本输入？

我有一个“添加更多”链接可以创建新链接，还有一个链接可以删除它们。每个人都有一个独特的身份证。

此外，必须填写至少两个文本框。

Answer 1

使用Validation plugin你可以add rules dynamically。这是一个例子：

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.4.1.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript">
    var count = 0;
    $(function() {
        $('form').validate({
            rules: {
                input0: {
                    required: true
                }
            },
            message: {
                input0: {
                    required: 'This field is required'
                }
            }
        });

        $('a').click(function() {
            count++;
            var newElement = $('<input type="text" name="input' + count + '" value="" />');
            $('form').append(newElement);
            newElement.rules('add', {
                required: true,
                messages: {
                    required: 'This field is required'
                }
            });

            return false;
        });
    });
    </script>
</head>
<body>
    <form>
        <input type="text" name="input0" value="" />
        <input type="submit" value="OK" />
    </form>

    <a href="#">Add input</a>
</body>
</html>

Answer 2

我wrote a blog post解释如何动态地向表单添加输入，同时为jQuery Validate插件添加验证规则。

在我的例子中，它是头盔的订单：

//Each set of helmet inputs gets unique IDs
function newHelmetInputs(i){
var inputSet = ''; 
inputSet += '<label for="helmet'+ i +'color">Helmet '+ i +' Color</label>'
inputSet += '<input id="helmet'+ i +'color" name="helmet['+ i +'][color]"/>'
inputSet += '<label for="helmet'+ i +'size">Helmet '+ i +' Size</label>'
inputSet += '<input id="helmet'+ i +'size" name="helmet['+ i +'][size]"/>'
return inputSet;
}

//Actually adding them to the page
$('#addhelmet').click(function(){
var i = nextNumber(); //nextNumber() is a closure - see my blog for details
var newInputs = newHelmetInputs(i); //i is used above in IDs
$(this).before(newInputs);
('#helmet' + i + 'size').rules('add', {digits: true}); //matching validation rule
});

博客文章更详细，并解释了如何使用PHP处理它。

至于必须填写至少两个文本框的要求，我为此写了一个jQuery Validate method，而a similar one表示“要么填写本节中至少X个字段，要么跳过该部分完全。“

因此，例如，如果您的表单允许人们订购三明治，并且每个三明治都有面包和填充的输入，您可以为他们想要订购的三明治动态添加字段。他们不需要填写＃2夹心菜，但如果他们这样做，他们必须给你面包和馅料类型。

Answer 3

一种简单的方法是在提交时计算非空文本框的数量。

 $(function()) {
      $('form').submit( function() {
           if ($(this).find('input:text')
                      .filter( function() { return $(this).val() != ''; }) < 2) {
               ... display validation errors...
               return false;
           }
           return true;
      });
 }):

动态元素的javascript验证

3 个答案: