Валидация формы: как правильно реализовать проверку пароля?

Question

[Сергей]

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

var forms = document.querySelectorAll('.validate');
for (var i = 0; i < forms.length; i++) {
  var inputs = forms[i].elements;
  for (var j = 0; j < inputs.length; j++) {
    validate(inputs[j]);
  }
}

При этом стоит задача сравнить поля ввода паролей (начальное поле ввода пароля и поле для его повторного набора). Как мне узнать, что эти поля принадлежат одной форме, а не разным?

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

Answer 1

[Stalker_RED]

Подкидываю идею: не делай этого вообще.
Делать какие-то странные нестандартные штуки имеет смысл только тогда, когда со стандартными что-то не срослось.

ОБычно проверяют текущую форму в которой юзер что-то вводит или которую он сабмитит, а не все подряд на странице.
Кроме того, неплохо бы почитать о встроенной валидации из html5
https://developer.mozilla.org/ru/docs/Learn/HTML/F...

Если у вас несколько одинаковых форм, то можно проверять так:

form.addEventListener('submit', function(){
  let p1 = form.querySelector('[name=password]') // поля в текущей форме, а не из других
  let p2 = form.querySelector('[name=password_confirm]')
  if (p1.value !== p2.value) {
    // ...
  }
})

Comments

[Сергей]

О встроенной валидации я читал и немало. Она несомненно хороша, но не даёт той гибкости, которую можно получить с js (например, пользовательские сообщения об ошибках или единый вид этих ошибок в разных браузерах). Насчёт нецелесообразности проверки всех форм - согласен, тут меня что-то не в ту степь понесло. Спасибо.

Answer 2

[Матвей Феникс]

Если есть доступ к jquery - то лучший вариант это jquery validation.
Вот пример реализации, там есть как раз такой функционал для паролей https://github.com/mtvphnx/hate-jquery-validation

Как узнать что поля принадлежат одной и той же форме? Уникализируйте формы (id, class, attr).

Answer 3

[kenny_gomel]

Метод получения полей формы зависит от момента валидации, но оба они работают через JS.
Суть в том, чтобы подняться по DOM-дереву до формы, если не обходимо, и в ней уже найти все input, checkbox, radio и textarea.
Далее уже валидировать в зависимости от тэга и типа (в случае с input).

А проверку схожести паролей я бы захардкодил, например по name-ам "password" и "password_repeat" или же во втором поле в data-атрибуте (например data-equal-to) указывал бы name/class/id первого поля, с которым его необходимо сравнить.

Comments

[kenny_gomel]

И если не секрет, почему вы используете отдельные формы? Если они несут в себе разные функции, то зачем сразу брать все, а не поочерёдно?

[Сергей]

Вы правы, затупил на ночь глядя.

Answer 4

[xmoonlight]

closest