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

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

厳密には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" />

正規表現の入力パターンを使用できます（ブラウザーの互換性を確認してください）

<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>

最小限のJavaScriptを使用した簡単な解決策は、html属性パターンを使用することです（ほとんどの最新のブラウザーでサポートされています）。これは、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>

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>

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;

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

パターンを使用して一致を確認する際のもう1つの問題は、パターンを使用してパスワードが正しい形式（文字と数字が混在しているなど）であることを確認することです。

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

これは、もう少し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>

他の回答で述べたように、これを行う純粋なHTML5の方法はありません。

すでにJQueryを使用している場合は、これで必要なことが実行されます。

$(document).ready(function() {
  $('#ourForm').submit(function(e){
      var form = this;
      e.preventDefault();
      // Check Passwords are the same
      if( $('#pass1').val()==$('#pass2').val() ) {
          // Submit Form
          alert('Passwords Match, submitting form');
          form.submit();
      } else {
          // Complain bitterly
          alert('Password Mismatch');
          return false;
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ourForm">
    <input type="password" name="password" id="pass1" placeholder="Password" required>
    <input type="password" name="password" id="pass2" placeholder="Repeat Password" required>
    <input type="submit" value="Go">
</form>