Как в CSS фреймворке «Materialize CSS» предвратить выполнение стандартного обарботчика потери фокуса текстового поля?

Question

[Юрий Ерусалимский]

Потихоньку изучаю CSS фреймворк Materialize CSS, появилось желание для текстовых полей (о них в документации тут) реализовать алгоритм:
1. Если длина строки в input поле = 8, то добавляем класс valid (означающий верное поле), который подчёркивает текстовое поле зелёным цветом.
2. Если длина строки не равна 8, то добавляем класс invalid, подчёркивая поле красным цветом.
Для получения события ввода текста в input воспользовался плагином. Код получился примерно таким:

$('#login_password').bind('textchange focusout focusin',function(){
	var login_password_length = $('#login_password').val().length;
	if (login_password_length != 8){
		$(this).removeClass("valid");
		$(this).addClass("invalid");
	}
	if (login_password_length == 8){
		$(this).removeClass("invalid");
		$(this).addClass("valid");
	}
});

То есть, при вводе, получение и потере фокуса, текстовое поле должно загараться соответствующим цветом. Но! Стандартный обработчик из самой библиотеки Materialize после моего кода обрабатывает, видимо, текст так - "если что-то написано, то ставим класс valid". Код входит в условие установки класса invalid при неравности 8 символам, но далее всё перекрывается стандартным обработчиком Materialize, который возвращает текстовому полю класс valid. Я бы хотел этот стандартный код диактивировать на уровне моего кода, не давая ему запуститься. Знаю про preventDefault, но это, видимо, не то. Подскажите, как не дать запуститься стандартному обработчику потери фокуса из самой библиотеки Materialize?

UPD: Решением оказалось дополнительное дублирование кода через $(document).on("textchange focusout focusin","#login_password",function(){});

Answer 1

[Elwen]

Перед вашей функцией на проверку поставьте
$('#login_password').unbind();
Это отменит все обработчики, которые были привязаны к полю.

Comments

[Юрий Ерусалимский]

$('#login_password').unbind();
$('#login_password').bind('textchange focusout focusin',function(){
var login_password_length = $('#login_password').val().length;
if (login_password_length != 8){
$(this).removeClass("valid");
$(this).addClass("invalid");
}
if (login_password_length == 8){
$(this).removeClass("invalid");
$(this).addClass("valid");
}
});

Такой код так и не позволил мне заставить не выполняться стандартную обработку Materialize. Всё так же устанавливает класс valid.

[Юрий Ерусалимский]

Помогло дублирование кода в обработчике $(document).on("textchange focusout focusin","#login_password",function(){});