Jquery Validate Успешная функция не очищает допустимые метки при повторной проверке?

Question

У меня есть форма, которая использует плагин JQuery Validate для проверки данных.Для поля имени пользователя (но не для других полей в моей форме) я хотел бы отобразить «Имя пользователя доступно» рядом с полем, если имя пользователя доступно.

У меня это почти работает.Единственное, что проблематично, - это когда пользователь редактирует имя пользователя после ввода действительного значения, предыдущее действительное сообщение никогда не удаляется, поэтому рядом с полем, в котором написано «Имя пользователя доступно Имя пользователя доступно» или «Имя пользователя доступно Имя пользователя доступно Имя пользователя доступнои т. д.

Какие изменения мне понадобятся, чтобы удалить предыдущие сообщения «Имя пользователя доступно» при повторной проверке этого поля?

Моя функция успеха jquery выглядит следующим образом:

$("form").validate({
        success: 
            function(label) {

                if (label.attr('for') == "username") {
                    var element = '#' + label.attr('for');
                    label.removeClass("error").addClass("valid").text("Username available");
                } else {
                    label.removeClass("error");
                }


        }
    });

    $("#regForm").validate();
});         

Answer 1

Я нашел решение.

По сути, если ваш CSS не обновляется после добавления допустимого класса, то есть правила класса не переопределяются. Зачем? Проблема не в javascript, а в вашем CSS. Ваш действительный класс должен быть объявлен ПОСЛЕ вашего класса ошибок ....

Я потратил 2 часа на поиск проблемы на JS, но это на CSS .... аааа ....

Answer 2

Я наконец-то понял это сам.Если посмотреть на исходный код плагина validate, если вы удалите класс «error» из допустимой метки, метка не будет повторно использоваться при повторной валидации, вместо этого она создаст новую метку.

Так что мой способ обойти это - удалить .removeClass () из моей функции успеха и изменить действительный класс моей таблицы стилей, чтобы он использовал! Важный для переопределения элементов из класса ошибок, которые отличались.

Новая функция проверки:

$("form").validate({
    success: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.addClass("valid").text("Username available");
            } else {
                label.addClass("invisiblevalid"); //ie. hide
            }


    }
});

$("#regForm").validate();

});

измененный код таблицы стилей:

label.error {
background: url('check.gif') no-repeat;
color: #FF0000;
}
label.valid {
background: url('check.gif') no-repeat !important; 
color: #339900 !important;
}
label.invisiblevalid {
display: none !important;
}

Answer 3

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

Ваш JavaScript выглядит нормально, но вам нужно убедиться, что ваш HTML-код настроен правильно, используя текст jQuery с меткой, которая выглядит не так, как показано ниже, может вызвать проблемы.

<label id="myLabel"></label>

В комментариях на странице jQuery есть небольшая заметка здесь .

Answer 4

Я не уверен, какой именно плагин вы используете.Но я думаю, это должно выглядеть примерно так.

$("form").validate({
    success: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.removeClass("error").addClass("valid").text("Username available");
            } else {
                label.removeClass("error");
            }


    },
    error: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.addClass("error").removeClass("valid").text("Username unavailable");
            } else {
                label.addClass("error");
            }


    }
});

$("#regForm").validate();