Đặt đầu vào là không hợp lệ

Question

Tôi có hai yếu tố đầu vào, ví dụ:

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

và tôi muốn so sánh các đầu vào này và nếu chúng khớp, hãy đặt đầu vào là hợp lệ. Tôi cố gắng này, nhưng tôi nghĩ rằng prop('valid', true); không hoạt động:

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

tôi tạo ra một mẫu đăng ký và nếu mật khẩu là không giống nhau, lĩnh vực đầu vào là không hợp lệ và tôi không thể nộp này và chỉ cho tôi một số gợi ý. ... và tôi không biết cách tôi đặt đầu vào này là không hợp lệ

Answer 1

Trong HTMLInputElement interface, không có bất động sản nào như valid hoặc invalid.

Bạn có thể sử dụng phương thức setCustomValidity(error) với xác thực biểu mẫu gốc.

Đối với kịch bản của bạn, đây là một bản demo nên hoạt động trong tất cả các trình duyệt tương thích 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>