0

如何在 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();
}
4

2 回答 2

0

你在找beforeSend吗？

beforeSend 类型：Function( jqXHR jqXHR, PlainObject settings ) 一个预请求回调函数，可用于在发送之前修改 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 ){}
  });
于 2013-11-05T00:20:44.143 回答
0

使用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();
}
于 2013-11-07T00:24:03.793 回答