Ustaw wejście jako nieprawidłowe

Question

Mam dwa wejścia, np.

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

i chcę porównać te wejścia, a jeśli pasują, ustawić wejście jako prawidłowe. Próbowałem to, ale myślę, że prop('valid', true); nie działa:

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

utworzyć formularz rejestracyjny, a jeśli hasła nie są takie same, pole wejściowe jest nieważny i nie mogę złożyć tego i pokaż mi jakąś wskazówkę. ... i nie wiem, jak ustawić to wejście jako nieprawidłowe

Answer 1

W HTMLInputElement interface nie ma takiej właściwości, jak valid lub invalid.

Można użyć metody setCustomValidity(error) z natywnym sprawdzaniem poprawności formularza.

Co do skryptu, oto demo, który powinien działać we wszystkich przeglądarkach zgodnych z HTML5:

$('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>