Set input as invalid

Question

I have two inputs, e.g.

pass:       
pass again:  

        

Answer 1

In the HTMLInputElement interface, there is no such property as valid or invalid.

You can use the setCustomValidity(error) method with native form validation.

As for your script, here's a demo that should work in all HTML5 compliant browsers:

$('input[name=pass2]').keyup(function () {
    'use strict';

    if ($('input[name=pass]').val() === $(this).val()) {
        $('#pass_hint').html('match');
        this.setCustomValidity('');
    } else {
        $('#pass_hint').html('mismatch');
        this.setCustomValidity('Passwords must match');
    }
});

    
Password:
        
    
    
Verify:
        
    
    

    Submit