Question

我正在尝试将验证添加到由ajax提交的表单中，并使其部分正常工作。

以下是提交表单的代码：

<script type="text/javascript">
$(document).ready(function(){$(".sendName").click(function(){
var Email=$("#Email").val();
var Name=$("#Name").val();
var ErrorType=$("input:radio[name=ErrorType]:checked").val();
var Univer=$("#Univer").val();
var ErrorMessage=$("#ErrorMessage").val();
$.post("report.php",{Email:Email,Name:Name,ErrorType:ErrorType,Univer:Univer,ErrorMessage:ErrorMessage},function(data){$("#loadName").html(data).effect('bounce', { times: 5, distance: 30 }, 300);
  });
 });
});
</script>

该代码完美无缺。

我也在使用livevalidation插件，并且主要使用它。我唯一的问题是从提交表单的函数中调用验证代码。

通常验证代码的调用如下：

 <form onsubmit="return validate(this)">

但是，因为表单是由ajax提交的，所以当前的表单标签是：

 <form onSubmit="return false;">

所以我需要做的是从通过ajax提交表单的函数中调用validate函数。

我该怎么办？这两个脚本都可以自行运行，这只是我需要弄清楚的最后一件事。

所以我需要在调用ajax函数时调用validate函数，如果表单验证脚本可以完成ajax请求，如果表单没有验证，则不应该提交。

我做了一些搜索，发现了几个类似的问题，但没有解决方案。任何帮助将不胜感激。

Answer 1

更简单的方法是，只有在验证错误时才取消提交，否则让提交正常进行。

<form id="new-item" method="post" action="/i">

然后在你的javascript中：

$('#new-item').submit( function () {

  var valid = true;

  // do you validation logic
  valid = validate(this);

  // returning true will let the normal submit action happen
  // returning false will prevent the default action (i.e. the form will not be sumitted)
  return valid;

});

如果您不想使用标准提交功能（虽然这是最佳做法，因为它在禁用javascript时有效）您会做类似的事情，但总是返回false。

$('#new-item').submit( function () {

  var valid = true;

  // do you validation logic
  valid = validate(this);

  if (valid ) {
    // send your ajax post request here
  }


  // returning true will let the normal submit action happen
  // returning false will prevent the default action (i.e. the form will not be sumitted)
  return false;

});

Answer 2

同意账单

确认此表格

<form id="formId" ...
  .
  .
  <input type="submit" />
</form>

使用您的代码：

<script type="text/javascript">
$(document).ready(function(){
  $("#formId").submit(function(){
    if (!validate(this)) return false;
    var Email=$("#Email").val();
    var Name=$("#Name").val();
    var ErrorType=$("input:radio[name=ErrorType]:checked").val();
    var Univer=$("#Univer").val();
    var ErrorMessage=$("#ErrorMessage").val();
    $.post("report.php",
      {Email:Email,Name:Name,ErrorType:ErrorType,Univer:Univer,ErrorMessage:ErrorMessage},function(data){$("#loadName").html(data).effect('bounce', { times: 5, distance: 30 }, 300);
    });
    return false; // cancel normal submission
   });
});
</script>

将两个javascript函数组合在一起验证表单并通过ajax提交

2 个答案: