Czy możesz wymagać dwóch pól formularza, aby pasowały do ​​HTML5?

Czy istnieje sposób, aby wpisy w dwóch polach formularza były zgodne z HTML5? A może nadal trzeba to zrobić za pomocą JavaScript? Na przykład, jeśli masz dwa pola hasła i chcesz się upewnić, że użytkownik wprowadził te same dane w każdym polu, czy są jakieś atrybuty lub inne kodowanie, które można wykonać, aby to osiągnąć?

Niezupełnie z walidacją HTML5, ale trochę JavaScript może rozwiązać problem, postępuj zgodnie z poniższym przykładem:

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

Możesz z wyrażeniami regularnymi Wzorce wejściowe (sprawdź zgodność przeglądarki )

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

Prostym rozwiązaniem z minimalną ilością javascript jest użycie wzorca atrybutu html (obsługiwanego przez większość nowoczesnych przeglądarek). Działa to poprzez ustawienie wzorca drugiego pola na wartość pierwszego pola.

Niestety, musisz też uciec przed wyrażeniem regularnym, dla którego nie istnieje standardowa funkcja.

<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 będzie wymagany, ale ilość kodu można ograniczyć do minimum, używając <output>elementu pośredniczącego i oninputmodułu obsługi formularzy do wykonania porównania (wzorce i walidacja mogą rozszerzyć to rozwiązanie, ale nie są tutaj pokazane ze względu na prostotę):

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

Nie tylko HTML5, ale trochę JavaScript
Kliknij [tutaj] 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;

Odpowiedzi, które używają wzorca i wyrażenia regularnego, zapisują hasło użytkownika we właściwościach wejściowych jako zwykły tekst pattern='mypassword'. Będzie to widoczne tylko wtedy, gdy narzędzia programistyczne są otwarte, ale nadal nie wydaje się to dobrym pomysłem.

Innym problemem związanym z używaniem wzorca do sprawdzania zgodności jest to, że prawdopodobnie będziesz chciał użyć wzorca, aby sprawdzić, czy hasło ma odpowiednią postać, np. Mieszane litery i cyfry.

Myślę też, że te metody nie będą działać dobrze, jeśli użytkownik przełączy się między wejściami.

Oto moje rozwiązanie, które używa nieco więcej JavaScript, ale wykonuje proste sprawdzenie równości, gdy dane wejściowe są aktualizowane, a następnie ustawia niestandardową ważność HTML. Oba dane wejściowe można nadal przetestować pod kątem wzorca, takiego jak format wiadomości e-mail lub złożoność hasła.

W przypadku prawdziwej strony zmieniłbyś typ danych wejściowych na „hasło”.

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

Jak wspomniano w innych odpowiedziach, nie ma na to sposobu w czystym HTML5.

Jeśli korzystasz już z JQuery , to powinno zrobić to, czego potrzebujesz:

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