入力を無効に設定する

Question

私は2つの入力を持っています。

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

これらの入力を比較し、一致する場合は入力を有効に設定します。私はこれを試してみましたが、私はprop('valid', true);が動作しないと思います：

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

私は登録フォームを作成し、パスワードが同じでない場合は、入力フィールドが無効であると私はこれを提出し、私にいくつかのヒントを示してcan't。 ...この入力を無効に設定する方法はわかりません

Answer 1

HTMLInputElement interfaceには、validまたはinvalidというようなプロパティはありません。

setCustomValidity(error)メソッドをネイティブフォーム検証で使用できます。

スクリプトについては、ここですべての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>