Можно ли потребовать два поля формы для соответствия HTML5?

Есть ли способ потребовать, чтобы записи в двух полях формы совпадали с использованием HTML5? Или это все еще нужно делать с помощью javascript? Например, если у вас есть два поля пароля и вы хотите убедиться, что пользователь ввел одни и те же данные в каждое поле, есть ли какие-то атрибуты или другой код, который можно сделать для этого?

Не совсем с проверкой HTML5, но небольшой JavaScript может решить проблему, следуйте примеру ниже:

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

Вы можете использовать шаблоны ввода с регулярными выражениями (проверьте совместимость с браузером )

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

Простое решение с минимальным количеством javascript - использовать шаблон атрибута html (поддерживается большинством современных браузеров). Это работает, устанавливая образец второго поля на значение первого поля.

К сожалению, вам также нужно избегать регулярного выражения, для которого не существует стандартной функции.

<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, но объем кода можно свести к минимуму, используя промежуточный <output>элемент и oninputобработчик формы для выполнения сравнения (шаблоны и проверка могут дополнить это решение, но здесь не показаны для простоты):

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

Не только HTML5, но и немного JavaScript.
Нажмите [здесь] 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;

Ответы, использующие шаблон и регулярное выражение, записывают пароль пользователя во входные свойства в виде обычного текста pattern='mypassword'. Это будет видно только в том случае, если инструменты разработчика открыты, но это все еще не кажется хорошей идеей.

Другая проблема с использованием шаблона для проверки совпадения заключается в том, что вы, вероятно, захотите использовать шаблон, чтобы проверить правильность формы пароля, например, смешанные буквы и цифры.

Я также думаю, что эти методы не будут работать, если пользователь переключается между входами.

Вот мое решение, которое использует немного больше JavaScript, но выполняет простую проверку равенства, когда любой ввод обновляется, а затем устанавливает настраиваемую валидность HTML. Оба входа все еще можно протестировать на наличие шаблона, такого как формат электронной почты или сложность пароля.

Для реальной страницы вы должны изменить типы ввода на «пароль».

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

Как уже упоминалось в других ответах, для этого нет чистого HTML5.

Если вы уже используете JQuery , это должно сделать то, что вам нужно:

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