Примеры валидации форм с помощью 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;}
Примеры валидации форм при помощи JQuery

Добавьте следующий код 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

Использование плагина 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 символов.

После указания правил, мы добавили сообщения об ошибках, которые отобразятся, если правило не будет соблюдено.Откройте веб-страницу и протестируйте форму. Вы должны увидеть те же результаты валидации полей ввода формы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *