490f08a9

Заметки на полях: HTML5 validate field type password and re-password

Заметки, Программирование

Метки (теги) : ,

Автор: admin

В одном техзадании было категорическое требование, чтобы поля форм проверялись (валидировались) только с помощью новых возможностей HTML5. И все доводы в пользу того, что этим еще рано пользоваться, что еще не все браузеры это поддерживают не увенчались успехом. Но решение как всегда было найдено. Ниже пример как можно валидировать поля для ввода паролей (password, re-password) на совпадение (равенство). Поля также обязательны к заполнению в данном случае.

<form action="#" method="POST">
<label for="password">Password</label>
<input id="password" type="password" name="password" value="" required>
<br>
<label for="re-password">Re-Password</label>
<input id="re-password" type="password" name="re-password" value="" required>
<br>
<input type="submit" name="submit" value="Submit" />
</form>
$('form input[name="passwrd"]').blur(function(){
    $('form input[name="re-passwrd"]').attr('pattern', $(this).val())
});

Теперь немного объясню что к чему.
Есть в HTML5 такой параметр как pattern. В нем указывается регулярное выражение, и он будет валидировать данное поле по этому выражению. Поэтому когда фокус уходит с поля под именем password то мы с помощью javascript берем его value и записываем в параметр pattern поля re-password. И уже по нажатию на кнопку submit сработает родная проверка браузера. Таким образом можно сравнивать не только пароли, но и другие поля.

Благодарю за внимание. До скорых встреч.

Оставить комментарий