-2

是否可以将jquery 验证器与某种工具提示集成在一起？

这是我正在尝试做的事情：我有一个联系表单，关注任何字段，我希望出现一个实时工具提示，引导访问者输入什么内容，一旦工具提示对字段值感到满意，它就会显示“公认”。在此之前它会报告错误，例如“姓名必须至少为 5 个字符”或“您必须输入有效的电子邮件地址”。

然后在提交时，我想为所有未被接受的工具提示显示这些工具提示。我还希望它们以与 onfocus 时相同的方式淡入和动画。我还希望这些工具提示淡出，当我聚焦其中一个字段时，我聚焦的字段无法通过淡入淡出的动画运行，因为它已经显示。

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

4

2 回答 2

1

这就是您所需要的，它也有动画 >> FIDDLE 示例

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-06T23:09:53.770 回答
1

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

这个答案使用了一个名为Tooltipster的 jQuery 插件以及 jQuery Validate 插件。

首先，在所有将显示错误的特定元素上初始化 Tooltipster 插件（使用任何选项） ：form

$(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 的高级选项以及Validate 插件中内置的回调函数success:来errorPlacement:自动显示和隐藏工具提示，如下所示：

$(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 年 2 月 12 日在 2.1 版中发布的新 Tooltipster API 功能

于 2013-05-06T23:18:00.733 回答