javascript - jQuery 表单回调兼容性问题

标签 javascript jquery jquery-plugins jquery-validate jquery-forms-plugin

我的网站 ( http://www.jakelazaroff.com/#contact ) 上有一个使用 jQuery 提交的表单。表单成功提交时的回调函数应该使表单消失;但是,由于某种原因,这只适用于某些浏览器/操作系统组合。目前,兼容性列表如下:

WORKS
o  firefox 3.0, xp
o  firefox 3.0.14, vista
o  firefox 3.0.15, vista
o  firefox 3.5.5, os 10.6.2
v  chrome 4.0.249.30, os 10.6.2
o  chrome 3.0.195.33, w7

DOESNT WORK
o  safari 4.0.4, os 10.6.2
o  safari 4.0.3, os 10.5.8
o  firefox 3.5.5, w7
o  firefox 3.5.5, os 10.5.8
o  chrome 3.0.195.33, vista

o = unreproduced, v = reproduced, x = conflicting

...这是一个奇怪的列表(它适用于 Mac OS 10.6.2 上的 Firefox 3.5.5,但不适用于 Mac OS 10.5.8 上的 Firefox 3.5.5?)。我用来验证/提交表单和回调函数的代码如下:

// hide the form and display success message (called after form is submitted)
 function formHide() {

  // cache form wrapper and blurb
  var formWrapper = $("#contactForm");
  var formBlurb = $("#contact .formBlurb");

  // set the height of wrapper and blurb 
  formWrapper.height(formWrapper.height());
  formBlurb.height(formBlurb.height());

  // fade out required fields message, fade in success message
  formBlurb.find(".requiredFields").fadeOut("fast", function() {
   formBlurb.find(".thanks").fadeIn("fast");
  });

  // fade out form
  formWrapper.find("form").fadeOut("slow", function(){
   // slide up the div so there's no jump
   formWrapper.slideUp("slow");
  });
 }

 // cache the form
 var form = $("#contactForm form");

 // validate the form
 $("#contactForm form").validate({
  // when errors are made...
  errorPlacement: function() {
   // turn the background on those elements red
   $("#contactForm form .error").animate( { backgroundColor:"#ff6666" }, "fast" );
  },
  // when submitting the form...
  submitHandler:  function(form){
   $(form).ajaxSubmit({
    // use fm.pl as the submission script
    url: "cgi-bin/fm.pl",
    // hide the form if it's successful
    success: formHide
   });
  }
 });

我使用的表单插件可以在http://malsup.com/jquery/form/找到,我使用的验证插件可以在 http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 找到。我是否缺少某些东西会破坏兼容性?

谢谢:)

附注抱歉,我没有对我用作链接的插件的 URL 进行格式化 - 在我拥有 10 个声誉点之前,我无法发布多个链接。
P.P.S。好的,发布此内容让我多了 10 个声誉点,因此我正在使用的插件的 URL 现在是链接。

最佳答案

只是淡入淡出不起作用吗?这些行看起来很可疑:

  formWrapper.height(formWrapper.height());
  formBlurb.height(formBlurb.height());

你为什么要设置已经存在的高度?

关于javascript - jQuery 表单回调兼容性问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1899515/

相关文章:

javascript - v4 中的 d3 缩放功能问题

javascript - 如何将这个乱七八糟的代码块变成一个函数

javascript - 如何强制执行 JavaScript 构造函数?

javascript - 如何将事件绑定(bind)到动态创建的 JQuery DOM 元素

javascript - 获取循环中变量的值

jquery - 使用 jQuery 获取 html 元素渲染高度

javascript - jQuery追加将下载脚本标签中的外部src,但不会加载到DOM中

jQuery 查找最近的

javascript - 为什么我的工具提示在鼠标悬停时不可见? (jQuery)

javascript - 如何使用 jQuery 跨浏览器为 PNG 图像着色