JQuery validator & qTip2 - не скрывается после успеха

Я боролся с обеими библиотеками, чтобы работать вместе, и я почти закончил сейчас, наконец!

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

1. Создать форму
2. Установите правила проверки с помощью 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 за пределы поля ввода, qTip исчезнет.
5. Когда я снова qTip внутри поля ввода, старый qTip снова отобразится, указав "минимум 3 буквы.". Но внутри них есть 4 буквы. Почему он все еще показывается?

РЕДАКТИРОВАТЬ:

Это вывод html после Step 5

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