Puoi richiedere che due campi modulo corrispondano a HTML5?

C'è un modo per richiedere che le voci in due campi del modulo corrispondano utilizzando HTML5? O deve ancora essere fatto con javascript? Ad esempio, se hai due campi password e vuoi assicurarti che un utente abbia inserito gli stessi dati in ogni campo, ci sono alcuni attributi o altre codifiche che possono essere fatte per ottenere ciò?

Non esattamente con la convalida HTML5, ma un po 'di JavaScript può risolvere il problema, segui l'esempio seguente:

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

Puoi farlo con espressioni regolari Pattern di input (controlla la compatibilità del 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>

Una soluzione semplice con un javascript minimo consiste nell'utilizzare il modello di attributo html (supportato dalla maggior parte dei browser moderni). Funziona impostando il modello del secondo campo sul valore del primo campo.

Sfortunatamente, devi anche sfuggire alla regex, per la quale non esiste alcuna funzione standard.

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

Sarà richiesto JavaScript, ma la quantità di codice può essere ridotta al minimo utilizzando un <output>elemento intermedio e un oninputgestore di form per eseguire il confronto (i modelli e la convalida potrebbero aumentare questa soluzione, ma non sono mostrati qui per semplicità):

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

Non solo HTML5 ma un po 'di JavaScript
Fai clic [qui] 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;

Le risposte che utilizzano pattern e un'espressione regolare scrivono la password dell'utente nelle proprietà di input come testo normale pattern='mypassword'. Questo sarà visibile solo se gli strumenti per sviluppatori sono aperti, ma non sembra ancora una buona idea.

Un altro problema con l'utilizzo di pattern per verificare una corrispondenza è che è probabile che si desideri utilizzare pattern per verificare che la password sia della forma corretta, ad esempio lettere e numeri misti.

Penso anche che questi metodi non funzioneranno bene se l'utente passa da un input all'altro.

Ecco la mia soluzione che utilizza un po 'più di JavaScript ma esegue un semplice controllo di uguaglianza quando uno degli input viene aggiornato e quindi imposta una validità HTML personalizzata. Entrambi gli input possono ancora essere testati per uno schema come il formato dell'email o la complessità della password.

Per una pagina reale cambierai i tipi di input in "password".

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

Come è stato menzionato in altre risposte, non esiste un modo HTML5 puro per farlo.

Se stai già utilizzando JQuery , questo dovrebbe fare ciò di cui hai bisogno:

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