javascript - Jquery 阻止表单提交

Question

我遇到一些问题，无法通过以下代码提交表单。该表单具有动态输入。没有可以启动的，但它们是稍后添加的，但用户是后来添加的。此代码并未显示所有动态字段代码，但数组中会有 5 或 6 个字段，例如 type[]。

我想做的是阻止表单提交，直到至少添加一组动态输入并进行验证。该代码尚未经过验证。

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

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

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

在 JQuery 中，x 是已创建的字段数，因此我认为可以使用它来阻止表单提交。

提前谢谢您。

HTML:

    <div class="container">
    <h1>AWS CI Reservation</h1>
    <div class="row">
        <div class="col-md-6 pull-right">
            <p><strong>Instructions:</strong></p>
            <div class="well well-sm">...</div>
        </div>
        <div class="col-md-6">
    <form role="form" id="aws-res-ci" method="POST">
        <div class="form-group">
            <label for="reqName">Requester's Name:</label>
            <input type="text" class="form-control" id="reqName" name="reqName" placeholder="Enter Requester's Name">
        </div>
        <div class="form-group">
            <label for="reqEmail">Requester's Email:</label>
            <input type="text" class="form-control" id="reqEmail" name="reqEmail" placeholder="Enter Requester's Email">
        </div>  

        <div class="form-group">
            <label for="projectNum">Project #: <span style="color:grey;font-size:70%">(if known)</span></label>
            <input type="text" class="form-control" id="projectNum" placeholder="Enter Project #">
        </div>
        <div class="form-group">
            <label for="projectContact">Project Contact:</label>
            <input type="text" class="form-control" id="projectContact" name="projectContact" placeholder="Enter Project Contact">
        </div>
        <div class="form-group">
            <label for="location">Location:</label>
            <select class="form-control" name="location" id="location">
                <option value="">Please choose...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div class="form-group">
            <label for="bu">Business Unit requested for:</label>
            <select class="form-control" name="bu" id="bu">
                <option value="">Please choose...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>

        </div>
    </div>
        <hr>
        <div id="no-ci"></div>
        <div class="input_fields_wrap">
            <!-- Start dynamic fields -->   

            <!-- End dynamic fields -->
        </div>
        <br>
        <br>
            <div class="btn-group pull-right">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Add EC2 Instances <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" id="add_ec2_instance">Add EC2 Instance</a></li>
                <li><a href="#" id="add_ec2_instance">Add EC2 Auto Scaling Instance</a></li>
            </ul>
        </div>
        <span class="pull-right">&nbsp;&nbsp;</span>
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Add Database <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" id="add_rds_instance">Add RDS Instance</a></li>
                <li><a href="#" id="add_elastic_cache_instance">Add Elastic Cache Instance</a></li>
                <li><a href="#" id="add_redshift">Add Redshift Istance</a></li>
            </ul>
        </div>
        <span class="pull-right">&nbsp;&nbsp;</span>
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Add Storage <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" id="add_s3">Add S3 Instance</a></li>
                <li><a href="#" id="add_glacier">Add Glacier Instance</a></li>
            </ul>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

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);

Answer 1

你的代码...

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 以允许默认行为。

然后您可以使用隐藏的输入字段，并将其设置为必需，且值为空。这将通过触发验证错误来阻止提交。添加动态字段时，您只需删除此隐藏字段即可。 (您甚至可以将隐藏字段上的错误消息设置为“请先将字段添加到表单。”或其他内容。)

您还需要设置 ignore: 选项以忽略任何内容，否则隐藏字段将被忽略。

<小时/>

顺便说一句，著名的“jQuery 4U”jQuery Validate 示例/教程是我见过的最糟糕的，我不知道它的作者试图通过所有这些废话来实现什么目的。真的，refer to the tag wiki满足您所需的一切...

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

});

<小时/>

编辑:更仔细地检查您的代码后，您会发现 必填 字段，例如 reqName 和 reqEmail无论您的动态字段如何，都会阻止表单提交，因此我不完全确定您要做什么。

您还有一个严重的语法错误，导致验证插件根本无法工作...

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

字段名称中不能包含空格。当您有 - 时，必须将 name 用引号引起来。如果这应该是数学，你也不能这样做。由于我找不到任何名为 ci - count 的输入元素，我已将其从您的代码中删除，然后您可以看到 jQuery Validate 现在正在工作...

<强> http://jsfiddle.net/rpj9s3nt/

如果您尝试在不存在的字段上动态设置规则，则不能这样做；在 rules key:value 对中，key 只能包含字段“name”，不能包含其他任何内容。 The .rules('add') method是在动态创建输入元素后立即用来分配规则的内容。或者，您可以在创建元素时添加 HTML5 属性，jQuery Validate 插件将自动选择这些属性并将其转换为自己的规则。

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