0

我有一个表格，其中所有字段都是必填的。我有一个名为 Add person 的按钮来创建一个额外的字段来输入额外人员的详细信息。

您可以通过单击提交按钮来检查验证。

如果你点击添加人员按钮，它不会生成一个额外的字段的 div，除非上面的 2 个字段被填写（地址和 zip）。

所以我需要的是，当单击添加人员按钮时，我也需要显示警报。

并且当用户单击添加按钮时，它不应该允许他们生成另一个 div (.loop)，除非之前的人员详细信息已填满。

这是代码和 演示

$().ready(function() {
    $("#signupForm").validate({
        rules: {            
            address: {
                required: true,
            },
            zip: {
                required: true,
                number: true
            },      

        },
        messages: {         
            address: {
                required: "<br />Please provide your address",
            },
            zip: "<br />Please enter valid ZIP",        
        }
    });

    var c = 0;

    function HTMLloop(c) {
        return '<div class="loop">\
                  <strong>Person ' + c + '</strong><br/> \
                  <input type="text" name="firstName' + c + '"/> \
                  <input type="text" name="lastName' + c + '"/> \
                  <input type="text" name="mail' + c + '"/> \
                  <input type="text" name="company' + c + '"/> \
                  <input type="text" name="company' + c + '"/> \
                  <div class="remove">remove</div> \
               </div>';
    }

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

        if (c<5) $('#loops').append( HTMLloop(++c) );
    });
    $('#loops').on('click','.remove', function () {
        $(this).closest('.loop').remove();
        c--;
        $('#loops').find('.loop').each(function(i,e){
            $('strong', this).text( $('strong', this).text().replace( /\d+/g , ' '+(i+1) ) );
            $('input', this).each(function(){
                this.name = this.name.replace( /\d+/g , (i+1) );
            });
        });
    });
});
4

1 回答 1

1

检查这个。

$('.test').on('click', function () {
    if(!$("#signupForm").valid()){
        alert("Please enter mandatory fields.");
        return;
    }

    if (c<5) $('#loops').append( HTMLloop(++c) );
});

在上述情况下，您可以检查是否有任何字段为空白，然后您不允许添加另一组。希望这会帮助你。

于 2013-08-27T12:18:42.533 回答