使用 onSubmit 提交表单

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

我不会在你的 else 分支中再次提交，而是返回一个真值。

在你的 onsubmit 我会做 onsubmit="return validate(this);"

Answer 2

不要再次使用提交调用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 3

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

代替

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 4

在你的街区

   } 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 5

删除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 6

1. 不要使用 onsubmit 属性，它会将 JavaScript 混合到 html 标记中，并且违背了最佳实践。
2. 为什么不将验证部分作为注册功能（服务器端）。这样一来，您的往返次数就不会是您需要的两倍。遵循最佳实践，您应该尽可能少地发出 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/user/register.php
• ajax/user/login.php
• ajax/user/logout.php
• ajax/product/search.php
• ajax/product/detail.php
• ajax/product/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');
              });
          }
      }
  });
  });