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

Question

如果您在此处查看我的FIDDLE，则有一个经过正确验证的表格。您可以单击提交按钮来检查它是如何工作的。

还有一个名为 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($('#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');
    }      
}); 

Answer 3

尝试

$('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);
            });


        }

    }
}); 

演示：小提琴