带有工具提示的jquery验证程序

-2

是否可以将jquery validator与某种工具提示集成？带有工具提示的jquery验证程序

下面是我想要做的：我有一个联系表单，任何字段的焦点，我想要一个实时的工具提示出现，指示访问者输入什么，一旦工具提示满意字段值，它显示“接受”。在此之前它会报告错误，例如“姓名必须至少包含5个字符”，或者“您必须输入有效的电子邮件地址。”

然后提交我想显示所有未被接受的工具提示。我也希望他们能够像在聚焦时一样淡入淡出并以同样的方式进行动画制作。我也希望这些工具提示可以淡出，当我对其中一个字段进行了重点对焦时，并且因为它已经显示，我无法对焦的字段无法运行fadeIn的动画。

如何轻松做到这一点的任何想法？

来源

2013-05-06 Source

您可以在页面的某些不可见区域中使用div，并且当使用尝试输入或更改文本框时，可以将注入其中的指令移动到文本框附近。 P.S：你只需要一个div用于所有字段 – 2013-05-06 22:47:50

为什么我需要一个div用于所有字段？ div里面会显示和隐藏元素吗？即如果我正在输入电子邮件地址，我只想要电子邮件的工具提示，而不是其他字段。 – Source 2013-05-06 22:50:03

我的意思是，一个div，你为每个字段注入不同的信息 – 2013-05-06 22:55:06

以下是你需要的所有东西，它有动画太>> FIDDLE Example

HTML

<input type="text" id="txt1" /> 
<input type="text" id="txt2" /> 
<div id="tt"></div>

CSS

#tt{width:0px; height:0px; visibility':hidden; margin-left: -500px; background-color:red;}

jQuery的

$('#txt1').focus(function(){ 
$('#tt').css({'width':'200px', 'height':'50px', 'visibility':'visible', 'background-color':'red'}).html('you clicked text field ONE').animate({'marginLeft':'10px'},1000) 
}); 
$('#txt2').focus(function(){ 
    $('#tt').css({'width':'300px', 'height':'50px', 'visibility':'visible', 'background-color':'yellow'}).html('you clicked text field TWO').animate({'marginLeft':'150px'},1000) 
});

来源

2013-05-06 23:09:53

OP正在寻找与jQuery Validate插件的集成。 – Sparky 2013-05-07 00:05:27

工作演示：http://jsfiddle.net/bvu5f/

这个答案使用jQuery插件叫做Tooltipster与jQuery验证插件一起。

首先，初始化上所有特定form元件Tooltipster插件（with any options），将显示错误：

$(document).ready(function() { 

    // initialize tooltipster on form input elements 
    $('#myform input[type="text"]').tooltipster({ 
     trigger: 'custom', // default is 'hover' which is no good here 
     onlyOne: false, // allow multiple tips to be open at a time 
     position: 'right' // display the tips to the right of the element 
    }); 

});

其次，使用Tooltipster's advanced options随着success: and errorPlacement: callback functions built into the Validate plugin自动显示和隐藏工具提示如下：

$(document).ready(function() { 

    // initialize validate plugin on the form 
    $('#myform').validate({ 
     // any other options & rules, 
     errorPlacement: function (error, element) { 
      $(element).tooltipster('update', $(error).text()); 
      $(element).tooltipster('show'); 
     }, 
     success: function (label, element) { 
      // $(element).tooltipster('hide'); // normal validate behavior 
      $(element).tooltipster('update', 'accepted'); // as per OP 
     } 
    }); 

});

代码充分利用了2013年12月12日发布的2.1版新的Tooltipster API特性

来源

2013-05-06 23:18:00 Sparky

不错的插件，它的大小虽然很大，但是js + css〜41kB，它们是否允许用户选择他/她需要的代码块？ – 2013-05-06 23:28:54

@JEES，我不确定...我最近才开始用[Tooltipster]（http://calebjacob.com/tooltipster/）替换qTip2，因为它更易于使用，并且更易于配置以保持一致跨浏览器外观& feel; plus Tooltipster有一些很好的内置动画选项，类似于OP所要求的。当大多数人不再使用拨号时，41 kb不会打扰我太多。 – Sparky 2013-05-06 23:40:52

毫无疑问，如果你想要一个多用途的播放卡，这是一个节省时间的选择，但大多数插件增加了大小和更多的http请求，大部分的时尚包括CSS和JS，这是每个插件的2个要求！我个人更喜欢写我自己的代码。 – 2013-05-06 23:49:31

带有工具提示的jquery验证程序

回答

相关问题