25 июля, 2013

JavaScript

Проверка формы перед отправкой с помощью javascript

Проверка HTML форм

  1. Подключаем js скрипт, вот этот form.js.
  2. Вносим изменения в форму.
...
<form onsubmit="return checkEmpty('id_field_1','id_field_2')&&checkRadio('id_bloc_radio_1','id_bloc_radio_2')&&checkEmpty('id_field_3','id_field_4');" action="/" method="post">
...

Требование к форме: обязательные поля должны иметь ID, если эти поля — радиокнопки, то они должны быть заключены в любой тег с ID

Если поле окажется «неверным» (пустым или неправильно заполненным), то к этому полю добавится класс .empty_field, то же самое произойдет с блоком радиокнопок.

На данный момент пример можно посмотреть в конце публикации, форма добавления комментария использует именно этот скрипт проверки.

Как прикрутить проверку форм к AJAX отправке

...
$.ajax({
    ...
    beforeSend: function(data) {
        return checkEmpty('soformemail')&&checkEmail('soformemail');
    }
    ...
});
...

ЗЫ: не делал полную автоматизацию (указываем форме класс checkform и она втоматически становится проверяемой по полям с классм required_field). Формы очень важная часть сайта — общение с пользователями! Так что только ручками и тестить!

ЗЗЫ: не забываем проверку на стороне сервера, любой js отключается или обходится!


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

2010–2019 Блог Максима Златова, контакты

PHP execution time: 0.0096 s.
SQL execution time: 0.0015 s. (select publication with comments)

Яндекс.Метрика