带有工具提示的jQuery验证器 [英] jquery validator with tooltip

问题描述

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

Is it possible to integrate the jquery validator with a some sort of tooltip?

这是我正在尝试做的事情: 我有一个联系表单，关注任何字段，我希望显示一个实时的工具提示，将访问者引导到要键入的内容，并且一旦工具提示对字段值感到满意，它就会显示已接受".在此之前，它会报告错误，例如名称必须至少包含5个字符"或您必须输入有效的电子邮件地址."

Here is what I am trying to do: I have a contact form, onfocus of any fields, I want a real time tooltip to appear that directs the visitor into what to type, and once the tooltip is happy with the field value, it displays "accepted". Until then it reports an error e.g. "Name must be at least 5 characters", or "You must enter a valid email address."

然后在提交时，我想为所有未被接受的提示显示这些工具提示.我还希望它们像在对焦时一样淡入和设置动画. 我还希望这些工具提示淡入淡出，当我对其中一个字段不对焦时，我不对焦的字段无法通过fadeIn动画运行，因为它已经显示.

Then on submit I want to show these tooltips for all the ones that were not accepted. I also want them to fadeIn and animate the same way as when on onfocus. I also want these tooltips to fadeout, when I am infocus for one of the fields, and the field I am infocus cannot run through the animation of fadeIn, as it is already displayed.

关于如何轻松实现此目标的任何想法?

Any ideas of how to do this easily?

推荐答案

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

Working Demo: http://jsfiddle.net/bvu5f/

此答案使用名为 Tooltipster 的jQuery插件以及jQuery Validate插件.

This answer uses a jQuery plugin called Tooltipster along with the jQuery Validate plugin.

首先，在所有上初始化Tooltipster插件(具有任何选项) >会显示错误的特定form元素:

First, initialize the Tooltipster plugin (with any options) on all specific form elements that will display errors:

$(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的高级选项以及

Second, use Tooltipster's advanced options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:

$(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
        }
    });

});

代码利用13年2月12日发布的2.1版中新的Tooltipster API功能

Code takes advantage of the new Tooltipster API features released in version 2.1 on 2/12/13

这篇关于带有工具提示的jQuery验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！