web-dev-qa-db-ja.com

HTML5と一致する2つのフォームフィールドが必要ですか？

HTML5を使用して2つのフォームフィールドのエントリを一致させる必要がある方法はありますか？または、これはまだjavascriptで行う必要がありますか？たとえば、2つのパスワードフィールドがあり、ユーザーが各フィールドに同じデータを入力したことを確認したい場合、これを実現するための属性やその他のコーディングは可能ですか？

formshtml5
88
user981178

HTML5検証と正確に一致するわけではありませんが、少しのJavaScriptで問題を解決できます。以下の例を参照してください。

<p>Password:</p>
<input name="password" required="required" type="password" id="password" />
<p>Confirm Password:</p>
<input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
    function check(input) {
        if (input.value != document.getElementById('password').value) {
            input.setCustomValidity('Password Must be Matching.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>
<br /><br />
<input type="submit" />
83
Faisal

正規表現を使用できます入力パターン（チェック ブラウザの互換性 ）

<input id="password" name="password" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 6 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>

<input id="password_two" name="password_two" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>
27
Francisco Costa

最小限のJavaScriptを使用した簡単な解決策は、html属性パターンを使用することです（most最新のブラウザーでサポートされています）。これは、2番目のフィールドのパターンを最初のフィールドの値に設定することで機能します。

残念ながら、標準関数が存在しない正規表現もエスケープする必要があります。

<form>
    <input type="text" oninput="form.confirm.pattern = escapeRegExp(this.value)">
    <input name="confirm" pattern="" title="Fields must match" required>
</form>
<script>
    function escapeRegExp(str) {
      return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    }
</script>
13
wvdz

JavaScriptが必要になりますが、中間の<output>要素とoninputフォームハンドラーを使用して比較を実行することにより、コードの量を最小限に抑えることができます（パターンと検証はこのソリューションを強化できますが、ここでは簡単にするために示していません）：

<form oninput="result.value=!!p2.value&&(p1.value==p2.value)?'Match!':'Nope!'">
  <input type="password" name="p1" value="" required />
  <input type="password" name="p2" value="" required />
  <output name="result"></output>
</form>
3
ptrdo

HTML5だけでなく、少しのJavaScript
[ここをクリック] https://codepen.io/diegoleme/pen/surIK

HTML

    <form class="pure-form">
    <fieldset>
        <legend>Confirm password with HTML5</legend>

        <input type="password" placeholder="Password" id="password" required>
        <input type="password" placeholder="Confirm Password" id="confirm_password" required>

        <button type="submit" class="pure-button pure-button-primary">Confirm</button>
    </fieldset>
</form>

ジャバスクリプト

var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
1
EfisioBova

パターンと正規表現を使用する回答では、ユーザーのパスワードをプレーンテキストpattern='mypassword'として入力プロパティに書き込みます。これは、開発者ツールが開いている場合にのみ表示されますが、それでも良いアイデアとは思えません。

パターンを使用して一致を確認することに関する別の問題は、パターンが正しい形式であることを確認するためにパターンを使用する可能性があることです。文字と数字が混在しています。

また、ユーザーが入力を切り替えると、これらの方法はうまく機能しないと思います。

JavaScriptをもう少し使用しますが、どちらかの入力が更新されたときに単純な等価性チェックを実行し、カスタムHTMLの有効性を設定するソリューションを次に示します。両方の入力は、電子メール形式やパスワードの複雑さなどのパターンをテストできます。

実際のページでは、入力タイプを「パスワード」に変更します。

<form>
    <input type="text" id="password1" oninput="setPasswordConfirmValidity();">
    <input type="text" id="password2" oninput="setPasswordConfirmValidity();">
</form>
<script>
    function setPasswordConfirmValidity(str) {
        const password1 = document.getElementById('password1');
        const password2 = document.getElementById('password2');

        if (password1.value === password2.value) {
             password2.setCustomValidity('');
        } else {
            password2.setCustomValidity('Passwords must match');
        }
        console.log('password2 customError ', document.getElementById('password2').validity.customError);
        console.log('password2 validationMessage ', document.getElementById('password2').validationMessage);
    }
</script>
0
Little Brain