36

私は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);
        }
    });
});

登録フォームを作成しましたが、パスワードが同じでない場合、入力フィールドが無効になり、これを送信できず、ヒントが表示されません。...そして、この入力を無効に設定する方法がわかりません

4

1 に答える 1

46

HTMLInputElement インターフェイスには、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>

于 2013-08-08T14:58:22.663 に答える