为什么slideDown错误信息与jQuery验证一起工作？

所以看看代码：http://jsfiddle.net/qb34B/为什么slideDown错误信息与jQuery验证一起工作？

输入一个无效的电子邮件，点击提交按钮。你会看到错误信息淡入。

这是我的问题：我想能够滑动错误。但只有淡入淡出的作品。我怎样才能得到错误消息slideDown？

它需要工作在jQuery的支撑件（IE7 +，火狐，Safari，铬，等等），使用label元件，其是一个内联元件，因此它不能被滑动显示

2012-02-03 xckpd7

Here是一个工作示例。在此解决方案中，我在表单元素上使用float:left，然后使用div设置包装器选项。

<form > 
     <input type="email" name="email" placeholder="Enter email" style="float:left;"/> 
     <input type="submit" id="submit" style="float:left;"/> 
    </form> 

    $(document).ready(function() { 

     jQuery('form').validate({ 
      debug: true, 
      rules: { 
       email: { 
        required: true, 
        email: true 
       } 
      }, 
      wrapper: 'div', 
      messages: { 
       email: "Please enter a valid email address." 
      }, 
      errorPlacement: function(error, element) { 
        error.appendTo(element.parent()).hide().slideDown('normal', function() { 
        //callback func 
       }); 
      } 
     }); 
    });

来源

2012-02-03 18:52:51 sinemetu1

它似乎有效....你做了什么？ – xckpd7 2012-02-03 18:55:57

@ xckpd7更新后包含代码。主要部分是div封装和浮动：左侧表单元素。 – sinemetu1 2012-02-03 18:59:09

这很奇怪，因为我刚刚剥离了浮动部件，它仍然可以工作... – xckpd7 2012-02-03 19:01:42

错误所有浏览器（动画改变其高度）。

如果你想要滑动行为，那么你将不得不编写代码来生成所需的标记并对其应用滑动行为。

看看这个演示我已经写了一个自定义的逻辑来显示滑动效果，以防你想要定制逻辑。

Demo

来源

2012-02-03 18:25:22 ShankarSangoli

看看这个演示我已经写了一个自定义的逻辑来显示滑动效果，以防你想到自定义逻辑。 – ShankarSangoli 2012-02-03 18:45:54

这是一个更好的，但我非常谨慎编写自定义标记。除此之外，演示中的错误向上滑动，并且在Firefox（10.0，Mac）（回到我对编写自定义标记时感到谨慎）时，可以看到当错误弹出时，表单显示抽搐。 – xckpd7 2012-02-03 18:53:23

我理解你的担忧，但如果你必须支持多种浏览器，你必须有不同的方式来做到这一点。 – ShankarSangoli 2012-02-03 18:55:01

更新我更新的代码，以便它成功地将了slideDown错误和隐藏。不幸的是我不得不使用setInterval，这是不理想的。但是如果你找不到其他方法，这是一种解决方法。

http://jsfiddle.net/XrMzL/5/

你可以尝试以下

$(document).ready(function(){ 

    setInterval(function() { 
     if($(".valid").prev().hasClass("errorSlideDown")) { 
      $(".valid").prev().slideUp(); 
     } 
    },1000); 

    jQuery('form').validate({ 
     debug: true, 
     rules: { 
      email: { 
       required: true, 
       email: true 
      } 
     }, 
     messages: { 
      email: "Please enter a valid email address." 
     }, 
     errorPlacement: function(error, element) { 
      if (!element.prev().hasClass("errorSlideDown")) { 
       var itm = $("<div />").html(error.html()).addClass("errorSlideDown").hide(); 
       itm.insertBefore(element).slideDown(); 
      } 
     } 
    }); 
    });

我用的insertBefore做检查，看看是否我创建的动态范围，通过使用.prev（）函数已经存在，当生活很容易。

来源

2012-02-03 18:33:54

不幸的是，它似乎slideDown部分只在FF中工作。 IE和Chrome似乎只是想让它显示。 – 2012-02-03 18:40:02

我不认为编写自定义元素是最好的选择：稍后我需要验证插件所期望的那些错误，因为我们还需要在它们正确时淡出它们等。等等。以上所有都忽略这远远不能在Safari/Chrome/Opera /中运行，我还没有检查过IE浏览器。 – xckpd7 2012-02-03 18:41:48

@ xckpd7看到我更新的答案。它并不完美，但一旦它正确，它就会隐藏起来。还在IE，FF，Chrome中测试过。 – 2012-02-03 19:03:11

为什么slideDown错误信息与jQuery验证一起工作？

回答

相关问题