Javascript Jquery阻止表单提交

我遇到一些问题，无法提交以下代码的表单。 表单具有动态输入。没有要启动的文件，但会在以后添加这些文件，但会添加用户。 这段代码并没有显示所有的动态字段代码，但是数组中会有5到6个字段，比如类型[]

我想做的是阻止表单提交，直到至少添加了一组动态输入并进行了验证。代码还没有验证

我已经尝试了下面的代码示例，但它似乎不起作用，当我单击submit（提交），但没有动态字段时，它仍然会重置所有输入

submitHandler: function(form) {
    form.submit(function(event) {
         event.preventDefault();
    });    
}
submitHandler: function(form) {
    form.submit(function() {
         return false();
    });    
}

如果没有动态字段，我希望显示一个错误，告诉他们在提交表单之前至少完成1

在JQuery中，x是已经创建的字段的数量，因此我认为这可以用来防止表单提交

先谢谢你

HTML:

AWS CI保留
说明：

...
申请人姓名：
请求者的电子邮件：
项目#：：（如已知）
项目联系人：
地点：
请选择。。。
1.
2.
3.
4.
5.
请求的业务单位：
请选择。。。
1.
2.
3.
4.
5.





添加EC2实例




添加数据库





添加存储




提交

Jquery：

   (function($,W,D)
    {
        var JQUERY4U = {};

        JQUERY4U.UTIL =
        {
            setupFormValidation: function()
            {
                //form validation rules
                $("#aws-res-ci").validate({
                    rules: {
                        reqName: "required",
                        reqEmail: {
                            required: true,
                            email: true
                        },
                        projectContact: {
                            required: true
                        },
                        location: "required",
                        bu: "required",
                        ci-count: {
                            required: true,
                            min: 1
                        }
                    },
                    messages: {
                        firstname: "Please enter your firstname",
                        lastname: "Please enter your lastname",
                        password: {
                            required: "Please provide a password",
                            minlength: "Your password must be at least 5 characters long"
                        },
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                });
            }
        }

        //when the dom has loaded setup form validation rules
        $(D).ready(function($) {
            JQUERY4U.UTIL.setupFormValidation();
        });

        //setting up funcations
        var max_fields              = 10; //maximum input boxes allowed
        var wrapper                 = $(".input_fields_wrap"); //Fields wrapper
        var add_ec2                 = $("#add_ec2_instance"); //Add button ID

        var x = 0; //initlal text box count
        //EC2 Instance
        $(add_ec2).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div><input type="text" name="mytext[]"/> \
                <a href="#" class="remove_field">Remove</a></div>'); //add input box
            }
        });         

        //remove item when told
        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        });

    })(jQuery, window, document);

（函数（$，W，D）
{
var JQUERY4U={}；
JQUERY4U.UTIL=
{
setupFormValidation:函数（）
{
//表单验证规则
$（“#aws res ci”）。验证({
规则：{
请求名称：“必需”，
请求电子邮件：{
要求：正确，
电子邮件：真的
},
项目联系人：{
必填项：true
},
位置：“必需”，
bu：“必选”，
ci计数：{
要求：正确，
min:1
}
},
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为5个字符”
},
},
submitHandler:函数（表单）{
表单提交（）；
}
});
}
}
//当dom加载了设置表单验证规则时
$（D）.就绪（函数（$）{
JQUERY4U.UTIL.setupFormValidation（）；
});
//设置函数
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_ec2=$（“#add_ec2_instance”）；//添加按钮ID
var x=0；//初始文本框计数
//EC2实例
$（添加ec2）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

您的代码

submitHandler: function(form) {
    form.submit(function(event) {
         event.preventDefault();
    });    
}
submitHandler: function(form) {
    form.submit(function() {
         return false();
    });    
}

否和否。通过将

.submit（）

放在

submitHander

中，您所做的与您试图实现的完全相反

要阻止默认的

表单

提交

操作

submitHandler: function(form) {
    return false();    
}

但是，由于您描述只希望在表单中添加字段之前阻止提交，因此根本不能使用

submitHandler

，因为它将始终阻止提交。由于无法动态切换或更改这些选项，因此只需删除

submitHandler

即可允许默认行为

然后您可以使用一个隐藏的输入字段，并将其设置为

required

，值为nothing。这将通过触发验证错误来阻止提交。添加动态字段时，只需删除此隐藏字段。（您甚至可以将隐藏字段上的错误消息设置为“请先将字段添加到表单中”之类的内容

您还需要将

ignore:

选项设置为不忽略任何内容，否则为隐藏

submitHandler: function(form) {
    return false();    
}

$(document).ready(function() {

    $("#aws-res-ci").validate({
        ignore: [],  // ignore nothing; validate hidden fields
        rules: {
            // your rules
        },
        messages: {
            // your messages
        }
    });

    //setting up funcations
    var max_fields              = 10; //maximum input boxes allowed
    var wrapper                 = $(".input_fields_wrap"); //Fields wrapper
    var add_ec2                 = $("#add_ec2_instance"); //Add button ID

    var x = 0; //initlal text box count
    //EC2 Instance
    $(add_ec2).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/> \
            <a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });         

    //remove item when told
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    });

});

ci - count: {  // <- this can only be a field 'name' with or without quotes
    required: true,
    min: 1
}

<input type="text" name="ci[1]" required="required" min="1" />