Question

如果您检查我的 FIDDLE HERE ，则表单会经过正确验证。您可以单击“提交”按钮以查看其工作原理。

还有一个名为Add Person的按钮，它创建了一组文本字段。

我的问题是，添加人员按钮应仅在表单完全填充时创建文本字段。如果表单未填写且用户单击“添加人员”按钮，则应显示警告。

这是我的代码

$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
    // validate the comment form when it is submitted
    $("#commentForm").validate();

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",           
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required",
            'country': {
    required: true
 }
        },

        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy",
            country: "Please select an option"
        }
    });


clicks = 0;
$('a').on('click', function () {
    $('.attnd2').show();
  $('div.loop').show();
    if ($('div.loop').length < 5) {
        clicks++;
        if(clicks>1){
            newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('name', $(element).attr('name') + clicks);
        });
        }
        else{
        newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('name', $(element).attr('name') + clicks);
        });


    }

    }
}); 
});

Answer 1

您应该为rules添加dynamically created elements

$.validator.setDefaults({
    submitHandler: function(frm) { 
        var flag=true;
        var $allElemReq=$("input[required],select[required]");
        for(var ind=0;ind<$allElemReq.length;ind++)
        {
            elem=$allElemReq[ind];
            if(!$(elem).val())
            {
                flag=false;
                $(frm).validate().element($(elem));
                break;
            }
        }
        if(flag)
            alert("submitted!"); 
        else
            alert('Not submitted');
    }
});

其他为required attribute

添加compulsory fields

小提琴： http://jsfiddle.net/rw9ns/22/

Answer 2

尝试

$('a').on('click', function () {
    if(!$("#signupForm").valid()){
        return;
    }

    $('.attnd2').show();
    $('div.loop').show();
    if ($('div.loop').length < 5) {
        clicks++;
        if(clicks>1){
            newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr('name', $(element).attr('name') + clicks);
            });
        }
        else{
            newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr('name', $(element).attr('name') + clicks);
            });


        }

    }
});

演示：Fiddle

Answer 3

试试这个： Fiddle

$('a').on('click', function () {

    if($('#firstname').val() != '' && $('#lastname').val() != '' && $('#email').val() != '' && $("#agree").prop('checked') == true && $('#country').val() != '') {

    $('.attnd2').show();
    ('div.loop').show();
    if ($('div.loop').length < 5) {
        clicks++;
        if(clicks>1){
            newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('name', $(element).attr('name') + clicks);
        });
        }
        else{
        newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('name', $(element).attr('name') + clicks);
        });


    }

    }
    } else {
        alert('Please fillup field before add');
    }      
});

在添加额外文本字段之前验证表单

3 个答案: