Ajax 表单在提交时验证

Ajax form validate when submit

本文关键字：验证 提交 表单 Ajax      更新时间：2023-09-26

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

你在找beforeSend吗？

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

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

使用 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();
}
相关文章：