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

【问题标题】：Validate form before adding an extra text fields在添加额外的文本字段之前验证表单
【发布时间】：2013-08-26 07:52:16
【问题描述】：

如果您检查我的 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);
        });


    }

    }
}); 
});

【问题讨论】：

标签： jquery forms jquery-validate

【解决方案1】：

您应该为dynamically created elements 添加rules 喜欢

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

附加为compulsory fields添加required attribute

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

【讨论】：

【解决方案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

【讨论】：

但这仍然增加了额外的字段，。我需要的是限制添加字段，直到填写整个表单
@Sowmya 现已修复，在条件下错过了!
我还需要在按钮下方显示味精。喜欢请在此之前填写以上字段
@Sowmya 我认为这可能是一个不同的问题......你可以看看errorClass 和errorPlacement 选项

【解决方案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');
    }      
});

【讨论】：