2014-02-16 3 views
0

Я пытаюсь объединиться с обеими библиотеками, чтобы работать вместе, и я почти закончил сейчас, наконец!JQuery validator & qTip2 - Не скрывается после успеха

Сначала я попробовал нормальный, предложенный способ:

  1. Создание формы
  2. правила проверки Set с помощью escaped name attributes, поскольку RoR автоматически устанавливает все формы имен-атрибуты, как это: user[name].

Это не сработает, потому что я не знаю почему. JavaScript просто не распознал атрибут "user[name]" с квадратными скобками.

Затем я попробовал это другим способом и динамически добавил правила. Это фрагмент кода, как моя проверка выглядит сейчас:

Форма:

<form id="form" action="#"> 
    <input type="text" name="user[username]" /> 
    <input type="submit" /> 
</form> 

JavaScript:

$(function() { 

    $("input[name='user[username]']").rules("add", { 
     required: true, 
     minlength: 3, 
     maxlength: 20, 
     messages: { 
     required: "U better fill dis out!", 
     minlength: "Hey, minimum of 3 letters!", 
     maxlength: "U wanna fuck wis me? I no can read dat much!" 
     } 
    }) 

    $('#form').validate({ 
     debug: true, 
     validClass: 'valid', 
     errorClass: 'error', 
     errorPlacement: function(error, element) { 

     // qTip call 
     if (!$(element).hasClass('valid')) { 
      if (error.html() != "") { 
      $(element).qtip({ 
       content: { 
       text: error.html() 
       }, 
       position: { 
       my: 'left center', 
       at: 'right center', 
       target: $(element) 
       }, 
       show: { 
       when: false, 
       ready: true 
       }, 
       hide: false 
      }); 
      } 
     } 
     }, 
     success: function(label, element) { 
     // Hide tooltips on valid elements 
     $(element).not('.error').qtip('hide'); 
     }, 
     highlight: function(element, errorClass, validClass) { 
     $(element).addClass(errorClass).removeClass(validClass); 
     }, 
     unhighlight: function(element, errorClass, validClass) { 
     $(element).addClass(validClass).removeClass(errorClass); 
     } 
    }); 

}); 

Теперь представьте себе следующий сценарий:

  1. Я пишу что-то в это текстовое поле, как только 1 письмо
  2. qTip показывает мое сообщение для подтверждения, которое говорит мне: «Минимум 3 буквы. "
  3. Теперь я починю проблемы и ввод 4 буквы. Вся валидация должна Переходит.
  4. Когда я двигаю и щелкните вне поля ввода, qTip исчезнет.
  5. Когда я нажимаю внутри входа снова поле, старый qTip будет показан снова, говоря «Минимум 3 буквы.»Но есть 4 буквы внутри Почему это все еще показывает

EDIT:..?

Это выход HTML, после Step 5

<input aria-describedby="qtip-22" data-hasqtip="22" class="valid" name="user[username]" type="text"> 

ответ

0

решаемые

Ну, теперь я чувствую себя супер немой и как король одновременно.

Решение было довольно простым. Вместо того, чтобы скрывать qTip, просто удалите его, когда проверка прошла успешно.

... 
success: function(label, element) { 
    // Destroy tooltips on valid elements 
    $(element).not('.error').qtip('destroy'); 
} 
...