Können Sie zwei Formularfelder benötigen, um mit HTML5 übereinzustimmen?

Gibt es eine Möglichkeit, zu verlangen, dass die Einträge in zwei Formularfeldern mit HTML5 übereinstimmen? Oder muss das noch mit Javascript gemacht werden? Wenn Sie beispielsweise zwei Kennwortfelder haben und sicherstellen möchten, dass ein Benutzer in jedes Feld dieselben Daten eingegeben hat, können einige Attribute oder eine andere Codierung durchgeführt werden, um dies zu erreichen?

Nicht genau mit HTML5-Validierung, aber ein wenig JavaScript kann das Problem beheben. Folgen Sie dem folgenden Beispiel:

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

Sie können mit regulären Ausdrücken Eingabemuster eingeben ( Browserkompatibilität überprüfen )

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

Eine einfache Lösung mit minimalem Javascript besteht darin, das HTML-Attributmuster zu verwenden (das von den meisten modernen Browsern unterstützt wird). Dies funktioniert, indem das Muster des zweiten Feldes auf den Wert des ersten Feldes gesetzt wird.

Leider müssen Sie auch dem regulären Ausdruck entkommen, für den keine Standardfunktion existiert.

<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 wird benötigt, aber die Codemenge kann durch Verwendung eines Zwischenelements <output>und eines oninputFormularhandlers zur Durchführung des Vergleichs auf ein Minimum reduziert werden (Muster und Validierung könnten diese Lösung erweitern, werden hier jedoch der Einfachheit halber nicht angezeigt):

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

Nicht nur HTML5, sondern auch ein bisschen JavaScript
Klicken Sie [hier] auf 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;

Die Antworten, die Muster und einen regulären Ausdruck verwenden, schreiben das Kennwort des Benutzers als einfachen Text in die Eingabeeigenschaften pattern='mypassword'. Dies ist nur sichtbar, wenn Entwicklertools geöffnet sind, aber es scheint immer noch keine gute Idee zu sein.

Ein weiteres Problem bei der Verwendung von Mustern zur Überprüfung auf Übereinstimmung besteht darin, dass Sie wahrscheinlich Muster verwenden möchten, um zu überprüfen, ob das Kennwort die richtige Form hat, z. B. gemischte Buchstaben und Zahlen.

Ich denke auch, dass diese Methoden nicht gut funktionieren, wenn der Benutzer zwischen den Eingaben wechselt.

Hier ist meine Lösung, die etwas mehr JavaScript verwendet, aber eine einfache Gleichheitsprüfung durchführt, wenn eine der Eingaben aktualisiert wird, und dann eine benutzerdefinierte HTML-Gültigkeit festlegt. Beide Eingaben können weiterhin auf ein Muster wie E-Mail-Format oder Kennwortkomplexität getestet werden.

Für eine echte Seite würden Sie die Eingabetypen in "Passwort" ändern.

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

Wie bereits in anderen Antworten erwähnt, gibt es dafür keinen reinen HTML5-Weg.

Wenn Sie JQuery bereits verwenden , sollte dies genau das tun, was Sie benötigen:

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