JQuery 验证和表单提交 - 提交按钮需要按两次

Question

我是 javascript/jquery 的新手。

我正在尝试通过 JQuery 验证注册表单，验证工作正常，但在提交表单之前我遇到了一个小问题。

确切地说，用户必须按两次提交，第一次是为了验证运行，第二次是实际提交表单。

按一次提交的解决方案和通过所有验证规则然后提交公式的代码是什么？

$('document').ready(function()
{
    // name validation
    var nameregex = /^[a-zA-Z ]+$/;

    $.validator.addMethod("validname", function( value, element ) {
        return this.optional( element ) || nameregex.test( value );
    });

    // valid email pattern
    var eregex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    $.validator.addMethod("validemail", function( value, element ) {
        return this.optional( element ) || eregex.test( value );
    });

    $("#register-form").validate({

        rules:
        {
            name: {
                required: true,
                validname: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true,
                validemail: true
            },
            mobile_number: {
                required: true
                //phoneUK: true
            },
        },
        messages:
        {
            name: {
                required: "Please enter your first name",
                validname: "Name must contain only alphabets and space",
                minlength: "Your name is too short"
            },
            email: {
                required: "Please enter e-mail address",
                validemail: "Enter a valid e-mail address"
            },
            mobile_number:{
                required: "Please enter a valid phone number"
            }
        },
        errorPlacement : function(error, element) {
            $(element).closest('.form-group').find('.help-block').html(error.html());
        },
        highlight : function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            $(element).closest('.form-group').find('.help-block').html('');
        },

        submitHandler: function(form) {
            $("#register-form").on("submit", function (e) {
                e.preventDefault();

                var postData = new FormData($(this)[0]);
                var formURL = $(this).attr("action");
                var method = $(this).attr("method");

                $.ajax({
                    url: formURL,
                    type: method,
                    data: postData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        $("#register_dialog .modal-header .modal-title").html("Thank you!");
                        $("#register_dialog .modal-body").html(data);
                        $("#submitForm").remove();
                    },
                    error: function (jqXHR, status, error) {
                        console.log(status + ": " + error);
                    }
                });
            });
        }
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
<div id="register_dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="register_dialog"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content modal-sm">
                    <div class="modal-header form-group">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="registerDialogLabel">Registration form</h4>
                    </div>
                    <div class="modal-body">
                        <hr />
                        <form method="POST" id="register-form" name="register-form" action="form.php"
                              autocomplete="off">

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                                    <input type="text" class="form-control" name="name" id="name" minlength="3"
                                           placeholder="First Name"
                                           />
                                </div>
                                <span class="help-block" id="error"></span>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                                    <input type="text" class="form-control" name="email" id="email"
                                           placeholder="E-mail address"
                                    />
                                </div>
                                <span class="help-block" id="error"></span>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></div>
                                    <input type="number"
                                           class="form-control" name="mobile_number" id="mobile_number"
                                           placeholder="Contact Number"
                                           />
                                    </div>
                                <span class="help-block" id="error"></span>
                            </div>

                            <hr/>
                            <button type="submit" class="btn btn-primary btn-fresh">
                                <span class="glyphicon glyphicon-log-in"></span> Submit
                            </button>
                        </form>
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>

Answer 1

尝试行动="javascript:;"

<form method="POST" id="register-form" name="register-form" action="javascript:;"
                                  autocomplete="off">

Answer 2

我已经通过将 mobile_number 字段的输入类型更改为文本来解决问题，并在该规则上添加了数字，但我仍然遇到提交两次的问题。

Answer 3

the user has to press submit twice...

这是因为您在插件的 submitHandler 函数中放置了 .on('submit')：

submitHandler: function(form) {
    $("#register-form").on("submit", function (e) { // <- ?!
        e.preventDefault();
        ....

实际上，这是 submit 处理程序内部的 submit 处理程序。

删除 .on('submit')，您将立即解决 "click twice" 问题。该插件已经正确处理了关键事件，并且已经阻止了默认行为，因此您不需要 .preventDefault()。 submitHandler 仅在表单有效后触发。

此外，您可以简单地使用提供的 form 参数。

$("#register-form").validate({
    .....
    submitHandler: function(form) {
        var postData = new FormData($(form)),
            formURL = $(form).attr("action"),
            method = $(form).attr("method");

        $.ajax({
            ....
        });
        return false;
    }
});

JQuery 验证和表单提交 - 提交按钮需要按两次

JQuery validation and form submit - submit button needs to be pressed twice

jquery

jquery-validate