How to prevent the standard text field focus loss handler from being executed in the Materialize CSS framework?

Question

css

I’m slowly learning the Materialize CSS framework, and I wanted to implement the following algorithm for text fields (about them in the documentation ) 2. If the string length is not equal to 8, then add the invalid class, underlining the field in red. To receive the text input event in the input, I used the plugin . The code turned out something like this:

$('#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");
  }
});

That is, when entering, gaining and losing focus, the text field should light up in the appropriate color. But! The standard handler from the Materialize library itself, after my code, apparently processes the text like this - "if something is written, then we put the class valid". The code enters the condition for setting the invalid class if it is not equal to 8 characters, but then everything is covered by the standard Materialize handler, which returns the valid class to the text field . I would like to deactivate this standard code at the level of my code, preventing it from running. I know about preventDefault, but that's probably not it. Tell me how to prevent the standard focus loss handler from the Materialize library itself from running?

UPD: The solution turned out to be additional code duplication through$(document).on("textchange focusout focusin","#login_password",function(){});

Answer 1

Put before your function to check
This will cancel all handlers that were bound to the field.