Чи можете ви вимагати, щоб два поля форми відповідали 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>

ЯВАСКРИПТ

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>