Question

我有一个表格，其中所有字段都是强制性的。我有一个名为Add person的按钮，用于创建额外的字段以输入额外人员的详细信息。

您可以点击提交按钮来确认验证。

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

所以我需要的是，当点击添加人物按钮时，我也需要显示警告。

当用户点击添加按钮时，除非填写上一个人的详细信息，否则不应允许他们生成另一个div（.loop）。

这是代码和 DEMO

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

Answer 1

检查this。

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

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

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

在添加循环div之前验证表单

1 个答案: