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?

Answer 1

Not exactly with HTML5 validation but a little JavaScript can resolve the issue, follow the example below:

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

Answer 2

You can with regular expressions Input Patterns (check browser compatibility)

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