提交时的 AJAX 表单验证答案

【问题标题】：AJAX form validation on submit提交时的 AJAX 表单验证
【发布时间】：2014-12-18 07:38:53
【问题描述】：

我在后端有一个函数来验证任何给定的表单，但是，我正在使用这个函数，并且在表单提交无效时它可以正常工作，但如果表单有效，我的后端会返回一个字符串“有效”，我应该让表单恢复 POST ACTION

这是代码：

    $('form.ajaxpost').submit(function(event) {
        var valid = true;
        event.preventDefault();

        var form = $(this);
        var sbmtBtn = form.find('input[type=submit]');
        var sbmtBtnTxt = sbmtBtn.val();
        sbmtBtn.val('Validating ...').attr('disabled', 'disabled');

        $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) {
            if (data != 'valid') {
                valid = false;
                $('body').find('script').append(data);
                $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800);
                sbmtBtn.val(sbmtBtnTxt).attr('disabled', null);
                return false;
            }
            form.trigger('submit');
        })
    });

当它返回“有效”时，表单会一次又一次地触发“提交”:(

【问题讨论】：

标签： jquery ajax validation post

【解决方案1】：

您的代码没有终止条件。因此提交按钮会一次又一次地触发。

假设您只想在验证后提交一次。将您的代码更改为此。

var called_once = false; // identifier

$('form.ajaxpost').submit(function(event) {
    var valid = true;
    event.preventDefault();

    var form = $(this);
    var sbmtBtn = form.find('input[type=submit]');
    var sbmtBtnTxt = sbmtBtn.val();
    sbmtBtn.val('Validating ...').attr('disabled', 'disabled');

    $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) {
        if (data != 'valid') {
            valid = false;
            $('body').find('script').append(data);
            $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800);
            sbmtBtn.val(sbmtBtnTxt).attr('disabled', null);
            return false;
        }

        // triggering submit only when it is not called previously
        if (called_once === false) {
            form.trigger('submit');
            called_once = true;
        }
    })
});

希望这能解决问题...

【讨论】：

好主意，现在我需要表单来恢复提交（如果它是有效的）！ event.preventDefault(); 阻止发送操作

【解决方案2】：

似乎没有办法阻止默认事件并再次重新提交表单。所以它的工作方式是在验证后通过 AJAX 发布表单，而不是被阻止的默认提交:) 这是工作代码

    $('form.ajaxpost').submit(function(event) {
        event.preventDefault();

        var form = $(this);
        var sbmtBtn = form.find('input[type=submit]');
        var sbmtBtnTxt = sbmtBtn.val();
        sbmtBtn.val('Validating ...').attr('disabled', 'disabled');

        $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) {
            if (data != 'valid') {
                $('body').find('script').append(data);
                $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800);
                sbmtBtn.val(sbmtBtnTxt).attr('disabled', null);
                return false;
            } else {
                $.post(form.attr('action'), form.serialize());
                window.location = form.attr('action');
            }
        })
    });

【讨论】：