Validate html text input as it's typed

Question

What\'s the best way of validating an HTML text input as it\'s typed? All ways I know of doing it has some drawbacks:

1. Using $.keypress you only

Answer 1

Have you tried oninput?

HTML example:

<input name="username" id="user_name" oninput="readvalue();">

javascript:

function readvalue() {
    var name = $('#user_name').val();
}

Answer 2

let that=this;

$(this.element).find("input").keypress(function(e) {
               let character = String.fromCharCode(e.keyCode);

               let newValue =  this.value.substring(0,this.selectionStart) + character + this.value.substring(this.selectionEnd, String(this.value).length);


               if (!that.isFormatValid(newValue, that.getdecimalPoints())) {
                     e.preventDefault();
                     e.stopPropagation();
                     return false;
              }

              return true;
        });


        $(this.element).find("input").bind({
              paste: function() {
                     let _this = this;

                     setTimeout( function() {
                           let decimals = that.getdecimalPoints();
                           if (!that.isFormatValid($(_this).val(), decimals)) {                        
                                         $(_this).val('');                        
                           }
                     }, 0);                                                                                                  
                  }
           });

Answer 3

A good argument against this practice is also welcome, in case there are new problems that would rise if this validation were implemented; however, that seems a common thing in other languages, so I doubt it is a bad thing to want.

If by "validate" you mean "prevent invalid characters from being entered at all", I think this is a bad practice. It's confusing for users, who may not be paying close attention and who perhaps aren't even looking at the field while they type (e.g., if they're entering account or phone numbers that they're reading from a piece of paper). The value that actually gets saved/used may be slightly different to the value they thought they'd entered.

If by "validate" you mean "test the current value and draw the user's attention to any problems" by e.g., displaying an error next to the field or changing the background colour, then there is no problem using a combination of several events including keyup, change, blur, paste, click:

$("field selector").on("keyup change blur paste cut click", function() { ... });

This will catch most normal cases as the user types, and for the clipboard or drag'n'drop cases you at least know that at worst the field will still be validated when the user leaves it. (Obviously you don't allow submit until all errors have been corrected.)

If you process keyup and keydown that covers cases where the user held a key down, because most browsers will send repeated keydown events for that.