jquery validator с подсказкой

Question

Возможно ли интегрировать jquery validator с какой-то подсказкой?

Вот что я пытаюсь сделать: У меня есть контактная форма, в фокусе любых полей, мне нужна подсказка в режиме реального времени, которая направляет посетителя в то, что вводить, и как только всплывающая подсказка будет довольна значение поля, оно отображает «принято». До тех пор он сообщает об ошибке, например. «Имя должно быть не менее 5 символов» или «Вы должны ввести действительный адрес электронной почты».

Затем на отправке Я хочу показать эти всплывающие подсказки для всех тех, которые не были приняты. Я также хочу, чтобы они затухали и анимировали то же самое, что и при onfocus. Я также хочу, чтобы эти всплывающие подсказки исчезали, когда я инфокусируюсь для одного из полей, а поле, в котором я инфокусирован, не может пропустить анимацию fadeIn, поскольку она уже отображается.

Любые идеи о том, как это сделать легко?

Answer 1

Вот все, что вам нужно, это имеет анимации тоже >> 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) 
}); 

Answer 2

Рабочая Демо: http://jsfiddle.net/bvu5f/

Этот ответ использует плагин JQuery под названием Tooltipster вместе с плагином JQuery Validate.

Во-первых, инициализировать плагин Tooltipster (with any options) на всех конкретных 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'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 
     } 
    }); 

}); 

Код использует новые возможности API-интерфейса Tooltipster, выпущенные в версии 2.1 на 2/1 2/13