Bisakah Anda meminta dua kolom formulir untuk dicocokkan dengan HTML5?

Apakah ada cara untuk meminta entri dalam dua bidang formulir agar cocok menggunakan HTML5? Atau apakah ini masih harus dilakukan dengan javascript? Misalnya, jika Anda memiliki dua bidang sandi dan ingin memastikan bahwa pengguna telah memasukkan data yang sama di setiap bidang, apakah ada beberapa atribut, atau pengkodean lain yang dapat dilakukan, untuk melakukannya?

Tidak persis dengan validasi HTML5 tetapi sedikit JavaScript dapat menyelesaikan masalah, ikuti contoh di bawah ini:

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

Anda bisa dengan ekspresi reguler Pola Masukan (periksa kompatibilitas browser )

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

Solusi sederhana dengan javascript minimal adalah menggunakan pola atribut html (didukung oleh sebagian besar browser modern). Ini bekerja dengan mengatur pola bidang kedua ke nilai bidang pertama.

Sayangnya, Anda juga perlu keluar dari regex, yang tidak memiliki fungsi standar.

<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 akan diperlukan, tetapi jumlah kode dapat ditekan seminimal mungkin dengan menggunakan <output>elemen perantara dan oninputpenangan formulir untuk melakukan perbandingan (pola dan validasi dapat meningkatkan solusi ini, tetapi tidak ditampilkan di sini demi kesederhanaan):

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

Tidak hanya HTML5 tetapi sedikit JavaScript.
Klik [di sini] 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>

JAVASCRIPT

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;

Jawaban yang menggunakan pola dan ekspresi reguler menulis sandi pengguna ke dalam properti input sebagai teks biasa pattern='mypassword'. Ini hanya akan terlihat jika alat pengembang terbuka tetapi sepertinya masih bukan ide yang bagus.

Masalah lain dengan menggunakan pola untuk memeriksa kecocokan adalah bahwa Anda mungkin ingin menggunakan pola untuk memeriksa apakah kata sandi dalam bentuk yang benar, misalnya huruf dan angka campuran.

Saya juga berpikir metode ini tidak akan berfungsi dengan baik jika pengguna beralih di antara input.

Inilah solusi saya yang menggunakan sedikit lebih banyak JavaScript tetapi melakukan pemeriksaan kesetaraan sederhana ketika salah satu input diperbarui dan kemudian menetapkan validitas HTML khusus. Kedua masukan tersebut masih dapat diuji untuk pola seperti format email atau kerumitan kata sandi.

Untuk halaman nyata Anda akan mengubah jenis masukan menjadi 'kata sandi'.

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

Seperti yang telah disebutkan dalam jawaban lain, tidak ada cara HTML5 murni untuk melakukan ini.

Jika Anda sudah menggunakan JQuery , ini harus melakukan apa yang Anda butuhkan:

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