提交时验证Ajax表单答案

【问题标题】：Ajax form validate when submit提交时验证Ajax表单
【发布时间】：2013-11-05 00:08:19
【问题描述】：

如何在 ajax 块中编写代码以验证表单字段？

我需要在下面描述的 ajax 请求页面之前检查字段名、姓氏和电子邮件。基本上，如果字段为空，则什么也不做。代码块如下。

HTML 是普通的。它的提交是 input class="red" id="send" type="submit" name="send" value="Send Message"

jQuery( document ).ready(function(){
jQuery( '#ajax_form' ).submit(function(){
  var data = jQuery( this ).serialize();

  jQuery.support.cors = true;

 // var email = $data("email").val();

  jQuery.ajax({
    type: "POST",
    url: "http://ecommerce.natopia.com/notifications/check-availability",
    data: data,
    success: function( data ){}
  });


//  closeCheckAvailability();
  return false;
});
});


function closeCheckAvailability(){
      $("div.on1").fadeOut("slow");
      $(".overOuter5").fadeOut("slow");
      $('.overOuter5').removeClass('displayBlock');
      $("#aa5").removeClass('displayBlock');
      $("#aa5").hide();
}

【问题讨论】：

标签： javascript jquery ajax forms

【解决方案1】：

你在找beforeSend吗？

beforeSend 类型：函数（jqXHR jqXHR，PlainObject 设置）A 可用于修改 jqXHR 的预请求回调函数（在 jQuery 1.4.x, XMLHTTPRequest) 对象在发送之前。用这个来设置自定义标题等。 jqXHR 和设置对象作为论据。这是一个 Ajax 事件。在 beforeSend 中返回 false 函数将取消请求。从 jQuery 1.5 开始，beforeSend 无论请求的类型如何，都会调用选项。

参考：http://api.jquery.com/jQuery.ajax/

jQuery.ajax({
    type: "POST",
    url: "http://ecommerce.natopia.com/notifications/check-availability",
    data: data,
    beforeSend: function(){
        //do your validation
    },
    success: function( data ){}
  });

【讨论】：

嗯，它应该像natopia.com 的注册表格一样工作，点击“加入我们”
那么我想你会使用livevalidation.com 插件来简化你的验证。在验证所有文件之前，它将阻止表单提交。
没那么简单。该表单位于一个 ajax 灯箱内，该灯箱在提交表单时会淡出。因此，该函数必须能够停止进程并警告哪个字段错误地填充了该字段下方的红色小消息。我说得通吗？
我了解，如果您的验证不是很复杂，那么每次用户输入每个字段时，您都不需要调用 php 脚本。继续看一下插件。使用它，如果您的验证之一失败，则不会提交表单。
@luri，你能编辑你的问题并包含淡出灯箱的源代码吗？

【解决方案2】：

使用success 回调关闭灯箱。将验证码放在调用jQuery.ajax 之前，如下所示：

jQuery( document ).ready(function(){
jQuery( '#ajax_form' ).submit(function(){
  var data = jQuery( this ).serialize();

  jQuery.support.cors = true;

  // do validation here
  if (not valid) {
      return false;  // exit the event handler without closing the lightbox.
  }

  jQuery.ajax({
    type: "POST",
    url: "http://ecommerce.natopia.com/notifications/check-availability",
    data: data,
    success: function( data ){closeCheckAvailability();}
  });

  return false;
});
});


function closeCheckAvailability(){
      $("div.on1").fadeOut("slow");
      $(".overOuter5").fadeOut("slow");
      $('.overOuter5').removeClass('displayBlock');
      $("#aa5").removeClass('displayBlock');
      $("#aa5").hide();
}

【讨论】：