Примеры валидации форм с помощью JQuery
При использовании форм на сайте стоит осуществлять проверку введённых данных. Это не только обеспечивает правильность введенной информации, но и улучшает пользовательский опыт.
Существует два вида валидации: на стороне клиента и на стороне сервера. Рекомендуется использовать оба типа проверки. Валидация на стороне клиента чаще всего реализуется с помощью JavaScript. Она предоставляет пользователям быстрый ответ об ошибках ввода, прежде чем отправить данные на сервер.
Валидация на сервере служит второй линией защиты от получения неверных данных. Всегда нужно проверять данные на сервере, поскольку JavaScript можно обмануть.
В этой статье мы рассмотрим, как с помощью jQuery выполнить валидацию на стороне клиента. Сначала проверим данные формы, написав правила валидации с нуля.Во втором примере покажем, как этот процесс упростить с помощью плагина jQuery Validation.
Для начала подключите библиотеку jQuery в HTML-файле.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>Добавьте следующую форму.
<!-- Первая Форма -->
<h2>Example 1:</h2>
<form id="first_form" method="post" action="">
<div>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name"></input>
</div>
<div>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name"></input>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email"></input>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password"></input>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
Приведенный выше код выведет простую форму с четырьмя полями и кнопкой отправки данных.
Для формы используйте следующие стили CSS.
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
.error {
color: red;
margin-left: 5px;
}
label.error {
display: inline;
}
Добавьте следующий код JavaScript в файл HTML.
$(document).ready(function() {
$('#first_form').submit(function(e) {
e.preventDefault();
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
var email = $('#email').val();
var password = $('#password').val();
$(".error").remove();
if (first_name.length< 1) {
$('#first_name').after('<span class="error">This field is required</span>');
}
if (last_name.length< 1) {
$('#last_name').after('<span class="error">This field is required</span>');
}
if (email.length< 1) {
$('#email').after('<span class="error">This field is required</span>');
} else {
var regEx = /^[A-Z0-9][A-Z0-9._%+-]{0,63}@(?:[A-Z0-9-]{1,63}.){1,125}[A-Z]{2,63}$/;
var validEmail = regEx.test(email);
if (!validEmail) {
$('#email').after('<span class="error">Enter a valid email</span>');
}
}
if (password.length< 8) {
$('#password').after('<span class="error">Password must be atleast 8 characterslong</span>');
}
});
});
В приведенном выше примере мы добавляем обработчик формы, который будет вызываться при отправке данных. Сначала в нем вызывается функция preventDefault(), чтобы предотвратить отправку данных. Затем мы создаём несколько переменных и присваиваем им значения различных полей формы.
Пока не обращайте внимания на строку $(".error").remove();, мы вернёмся к ней позже.
После получения значений полей формы выполняем несколько тестов, чтобы проверить корректность введенной пользователем информации. Мы проверяем, содержат ли значения поля first_name, last_name и email. Если пользователь оставил поле пустым, то к нему добавляется тег span с сообщением об ошибке.
Затем добавляем проверку для поля email. Для этой проверки мы используем регулярное выражение. В конце мы проверяем длину пароля, чтобы убедиться, что он содержит не менее 8 символов.
Строка $(".error").remove(); удаляет из документа любые элементы с классом error. Без нее каждый раз при возникновении сбоев при отправке формы сообщения о новых ошибках будут добавляться к предыдущим. В результате этого будут отображаться дублирующие сообщения.
Отправьте форму с некорректными данными, и вы увидите сообщения об ошибках.
Использование плагина jQuery Validation
В предыдущем примере мы написали, который проверял данные формы. Чтобы сделать этот процесс проще, используйте специальную плагин jQuery Validation. Укажите несколько правил для каждого поля формы, которое нужно проверить, а плагин выполнит всю валидацию за вас.
Чтобы увидеть плагин в деле, подключите jQuery в файле HTML.
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>Добавьте вторую форму в ваш файл.
<!-- Вторая Форма -->
<h2>Example 2:</h2>
<form id="second_form" method="post" action="">
<div>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"></input>
</div>
<div>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname"></input>
</div>
<div>
<label for="user_email">Email:</label>
<input type="email" id="user_email" name="user_email"></input>
</div>
<div>
<label for="psword">Password:</label>
<input type="password" id="psword" name="psword"></input>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
Добавьте следующий JavaScript- код в функцию $(document).ready(function() {}) после блока$('#first_form').submit(function(e) {}).
$('form[id="second_form"]').validate({
rules: {
fname: 'required',
lname: 'required',
user_email: {
required: true,
email: true,
},
psword: {
required: true,
minlength: 8,
}
},
messages: {
fname: 'This field is required',
lname: 'This field is required',
user_email: 'Enter a valid email',
psword: {
minlength: 'Password must be atleast 8 characterslong'
}
},
submitHandler: function(form) {
form.submit();
}
});
Мы применили правило required ко всем полям формы. Для поля адреса электронной почты добавили правило email. А к полю пароля- правило, которое проверяет минимальную длину в 8 символов.
После указания правил, мы добавили сообщения об ошибках, которые отобразятся, если правило не будет соблюдено.Откройте веб-страницу и протестируйте форму. Вы должны увидеть те же результаты валидации полей формы.