Can you require two form fields to match with HTML5

Question

Is there a way to require the entries in two form fields to match using HTML5  Or does this still have to be done with javascript  For example  if you have two password fields and want to make sure that a user has entered the same data in each field  are there some attributes  or other coding that can be done  to achieve this

User · Answer

Not only HTML5 but a bit of JavaScript
Click [here]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;

User · Answer

JavaScript will be required  but the amount of code can be kept to a minimum by using an intermediary  lt output gt  element and an oninput form handler to perform the comparison  patterns and validation could augment this solution  but aren t shown here for sake of simplicity     lt form oninput  result value   p2 value amp  amp  p1 value  p2 value   Match    Nope    gt     lt input type  password  name  p1  value    required   gt     lt input type  password  name  p2  value    required   gt     lt output name  result  gt  lt  output gt   lt  form gt

User · Answer

The answers that use pattern and a regex write the user s password into the input properties as plain text pattern  mypassword   This will only be visible if developer tools are open but it still doesn t seem like a good idea   Another issue with using pattern to check for a match is that you are likely to want to use pattern to check that the password is of the right form  e g  mixed letters and numbers   I also think these methods won t work well if the user switches between inputs   Here s my solution which uses a bit more JavaScript but performs a simple equality check when either input is updated and then sets a custom HTML validity  Both inputs can still be tested for a pattern such as email format or password complexity   For a real page you would change the input types to  password     lt form gt       lt input type  text  id  password1  oninput  setPasswordConfirmValidity     gt       lt input type  text  id  password2  oninput  setPasswordConfirmValidity     gt   lt  form gt   lt script gt      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          lt  script gt

User · Answer

You can with regular expressions Input Patterns  check browser compatibility    lt 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 gt    lt 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 gt

User · Answer

Not exactly with HTML5 validation but a little JavaScript can resolve the issue  follow the example below    lt p gt Password  lt  p gt   lt input name  password  required  required  type  password  id  password    gt   lt p gt Confirm Password  lt  p gt   lt input name  password confirm  required  required  type  password  id  password confirm  oninput  check this     gt   lt script language  javascript  type  text javascript  gt      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                       lt  script gt   lt br   gt  lt br   gt   lt input type  submit    gt

User · Answer

As has been mentioned in other answers  there is no pure HTML5 way to do this   If you are already using JQuery  then this should do what you need    x000D   x000D    document  ready function     x000D        ourForm   submit function e   x000D        var form   this  x000D        e preventDefault    x000D           Check Passwords are the same x000D        if      pass1   val        pass2   val       x000D               Submit Form x000D            alert  Passwords Match  submitting form    x000D            form submit    x000D          else   x000D               Complain bitterly x000D            alert  Password Mismatch    x000D            return false  x000D          x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt form id  ourForm  gt  x000D       lt input type  password  name  password  id  pass1  placeholder  Password  required gt  x000D       lt input type  password  name  password  id  pass2  placeholder  Repeat Password  required gt  x000D       lt input type  submit  value  Go  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

A simple solution with minimal javascript is to use the html attribute pattern  supported by most modern browsers   This works by setting the pattern of the second field to the value of the first field   Unfortunately  you also need to escape the regex  for which no standard function exists    lt form gt       lt input type  text  oninput  form confirm pattern   escapeRegExp this value   gt       lt input name  confirm  pattern    title  Fields must match  required gt   lt  form gt   lt script gt      function escapeRegExp str          return str replace    -                                g       amp            lt  script gt

[forms] Can you require two form fields to match with HTML5?

Examples related to forms

Examples related to html