jQuery表单Validator：需要提交两次

I am trying to implement the Form Validator from Jquery. onSuccess, I do an ajax-call.

我正在尝试从Jquery实现Form Validator。 onSuccess,我做一个ajax调用。

I was wondering why I need to push the submit-button twice before the validation starts working?

我想知道为什么我需要在验证开始工作之前按两次提交按钮?

The script is in a separate file which is included. If I call $.validation() on the page itself, it works immediately.

该脚本位于包含的单独文件中。如果我在页面本身上调用$ .validation(),它会立即生效。

Here is the js-code:

这是js代码:

$(document).ready(function () {
    $("#frmNews").submit(function (e) {
        e.preventDefault();

        // -- form validation
        $.validate({
            language: nederlands,
            onError: function () {
                // -- show alert
                $("#feedback-error").removeClass('hidden');
                // -- back to top
                $("html, body").animate({scrollTop: 0}, "slow");
            },
            onSuccess: function () {
                // -- show preloader
                $('body').toggleClass('loaded');

                $.ajax({
                    type: 'POST',
                    url: '/ajax',
                    data: $("#frmNews").serialize(),
                    success: function (data) {
                        var result = $.trim(data);
                        if (result == 'success') {
                            // -- show alert
                            $("#feedback-success").removeClass("hidden");
                            // -- clear all fields
                            emptyAllInputFields("#frmNews");
                            // -- back to top
                            $("html, body").animate({scrollTop: 0}, "slow");
                            // -- hide preloader
                            $('body').toggleClass('loaded');
                        }
                        else if (result == 'error_saving') {
                            // -- alert
                            $("#feedback-error").removeClass("hidden");
                            // -- back to top
                            $("html, body").animate({scrollTop: 0}, "slow");
                            // -- hide preloader
                            $('body').toggleClass('loaded');
                        }
                    }
                });
            }
        });
    });
});

1 个解决方案

#1

As mentioned by @epascarello in the comment section, you should place your validation outside of the submit handler.

正如@epascarello在评论部分中所提到的,您应该将您的验证置于提交处理程序之外。

What's actually happening in your script - The $.validate() is only initiated once the submit button is pressed. Then it handles validation (and eventually AJAX) on next click.

您的脚本中实际发生了什么 - 只有在按下提交按钮后才会启动$ .validate()。然后它在下次点击时处理验证(最终是AJAX)。

$("#frmNews").submit(function (e) {
    e.preventDefault();
});

$.validate({
    // ... your validation ...
});

#1