Question

我的表单onSubmit正在调用：

onsubmit="validate(this); return false;"

validate();如下：

function validate(obj) {
    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + obj.id).serialize(),
        success : function(data) {
            $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                $('#' + obj.id).submit();
            }
        }
    });
}

当我遇到0错误时，它正在尝试提交表单，但我得到了一个无限循环。我意识到这种情况正在发生，因为我的onSubmit再次调用了该函数。我准备好后如何实际提交表格？

编辑：

我只是在寻找解决这个问题的最佳方法。我想验证onSubmit以便快速响应用户，然后我想以我知道数据传输方式的方式提交表单（例如register.php将注册用户）。这就是为什么我没有做一个合并的动作/验证脚本，因为我不知道我提交的是哪种形式。我可能需要重新安排我这样做的方式，所以任何帮助都会受到赞赏。

Answer 1

删除onsubmit="validate(this); return false;"

并使用以下功能：

$('form').submit(function(e){
    e.preventDefault();
    var $form = $(this),
        $formId = $form.attr('id'),
        $formName = $form.attr('name');

    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + $formId).serialize(),
        success : function(data) {
            $('#' + $formId + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                document.forms[$formName].submit();
            }
        }
    });
});

您可以使用表单id或name进行测试：http://jsfiddle.net/67rvg/3/

Answer 2

我不会在你的其他分支中发出另一个提交，但会返回一个真正的值。

在你的onsubmit我做onsubmit =＆＃34; return validate（this）;＆＃34;

Answer 3

请不要使用提交电话再次submit，正如您所说，您将处于循环中...只需将所有内容发布为提交：

将您的$('#' + obj.id).submit();行更改为submitForm()并添加

function submitForm() {
    var form = $("#my_form"),
        url = form.attr("action"),
        dt = form.serialize();

    $.post(url, dt, function(data) {
       // your form was post'd successfully
    });
}

既然你知道如何工作，为什么要发明井？

为什么不使用jQuery Validate和remote validation为你做这份工作？

Answer 4

这应该有效：在重新提交之前取消绑定事件。

而不是

function validate(obj) {
    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + obj.id).serialize(),
        success : function(data) {
            $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                $('#' + obj.id).submit();
            }
        }
    });
}

尝试

function validate(obj) {
    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + obj.id).serialize(),
        success : function(data) {
            $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                $('#' + obj.id).unbind('submit').submit();
            }
        }
    });
}

Answer 5

在您的区块中

   } else {
        $('#' + obj.id).submit();
   }

而不是进行实际的表单提交，而是使用另一个ajax调用将数据发送到表单操作端点：

} else {

    $.ajax({
        url : obj.action
        ,type : obj.method
        ,data : $(obj).serialize()
        ,success : function() {
            // show success message/close window/ etc
        }
        , error: function() {
            // show error saving form message
        }
    });
}

这样，如果表单提交出现问题，您将能够更好地捕获结果。

Answer 6

不要使用onsubmit属性，它将JavaScript混合到html标记中，并且违背了最佳做法。
为什么不进行注册功能（服务器端）的验证部分。这样你就不会需要两倍的往返次数。遵循最佳实践，您应该尽可能少地发出http请求。您可以根据功能将php脚本组织到文件夹中。更容易分辨出提交的表格。这样，为每个表单提交创建唯一的验证脚本也会容易得多。您也可以使用REQUEST_URI服务器变量来判断您要提交的表单。

See here for instructions on accessing the REQUEST URI of the request within a php script.

如果您对提交的每个表单都进行了通用验证，则可以将其移动到单独的php文件中并将其导入到将使用该函数的所有文件中。然后，该函数将在您导入的脚本中可用。

See here for instructions on including files in php.

然后，您可以为每个单独的脚本添加自定义验证。有一天，您很可能需要对某些表单进行自定义验证。

UTIL / validation_util.php
AJAX /用户/ register.php
AJAX /用户/ login.php中
AJAX /用户/ logout.php
AJAX /产品/ search.php中
AJAX /产品/ detail.php
AJAX /产品/ addToCart.php

等...

$('#formId').on('submit', function (event) {

event.preventDefault();

$.ajax({
    url : "ajax/user/register.php",
    type : "POST",
    data : $(this).serialize(),
    success : function(data) {
        $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
        data = $.parseJSON(data);
        if(data['error_count'] >= 1) {
            $.each(data, function(i, item) {
                $('#' + i).addClass('form_errors');
            });
        }
    }
});
});

使用onSubmit提交表单

6 个答案: