Set input as invalid

Question

I have two inputs, e.g.

pass:       <input type="password" name="pass" required/> pass again:  <input type="password" name="pass2" required/> 

and I want to compare these inputs, and if they match, set input as valid. I tried this, but I think that prop('valid', true); does not work:

$(document).ready(function() {     $('input[name=pass2]').keyup(function() {         if($('input[name=pass]').val() == $('input[name=pass2]').val()) {             $('#pass_hint').empty();             $('#pass_hint').html('match');             $(this).prop('valid', true);         } else {             $('#pass_hint').empty();             $('#pass_hint').html('mismatch');             $(this).prop('invalid', true);         }     }); }); 

I create a registration form and if passwords are not the same, input field is invalid and I can´t submit this and show me some hint. ...and I don´t know how I set this input as invalid

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');      }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form action='#'>      <p>Password:          <input name=pass type=password required>      </p>      <p>Verify:          <input name=pass2 type=password required>      </p>      <p id=pass_hint></p>      <button type=submit>Submit</button>  </form>