Question

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

我需要在下面描述的ajax请求页面之前检查字段firstname，lastname和email。基本上如果字段是空的什么都不做。代码块在下面。

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();
}

Answer 1

您在寻找beforeSend吗？

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

REF：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 ){}
  });

Answer 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();
}

Ajax表单在提交时验证

2 个答案: