Проверка формы в JavaScript
Очень часто возникает необходимость добавления формы на сайт, ведь форма - это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в JavaScript мы и займёмся в этой статье.
Давайте для начала создадим форму, которую потом будем проверять:
<form name = 'form1' action = 'handler.php' method = 'post'>
Ваше имя:
<input type = 'text' name = 'firstname' />
<br />
Ваш пароль:
<input type = 'password' name = 'pass' />
<br />
Ваш пол:
<input type = 'radio' name = 'sex' value = 'male' />
<input type = 'radio' name = 'sex' value = 'female' />
<br />
Выберите число:
<select name = 'number'>
<option value = '1'>1</option>
<option value = '2'>2</option>
<option value = '3'>3</option>
</select>
<br />
Ваше сообщение:
<textarea name = 'message'></textarea>
<br />
Согласитесь с нашими правилами:
<input type = 'checkbox' name = 'rules' />
<br />
<input type = 'hidden' value = 'hidefield' />
Загрузите файл:
<input type = 'file' name = 'fileupload' />
<br />
<input type = 'submit' value = 'Отправить' name = 'sub' />
<br />
<input type = 'button' value = 'Просто кнопка' name = 'but' />
</form>Вот такая форма. Надеюсь, что с HTML Вы знакомы и объяснять, думаю, ничего не стоит. Если что-то непонятно, то посмотрите на работу этого кода в браузере.
Теперь поговорим о том, как получать значения из полей формы. Ведь прежде, чем их проверить, надо узнать, что написал там пользователь. Общий вид получения доступа к полю форму такой:
document.имя_формы.имя_поля.value;То есть сначала обращаемся к объекту Document, затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля. Давайте выведем все поля, которые подчиняются этому общему виду:
var form = document.form1;
document.write(form.firstname.value + "<br />");
document.write(form.pass.value + "<br />");
document.write(form.number.value + "<br />");
document.write(form.message.value + "<br />");
document.write(form.rules.value + "<br />");
document.write(form.hidefield.value + "<br />");
document.write(form.fileupload.value + "<br />");
document.write(form.sub.value + "<br />");
document.write(form.but.value + "<br />");Это все поля, которые имеют свойство value, и к которым можно получить доступ таким образом.
Теперь поговорим об одном особенном элементе формы - radio. Получим доступ к значению radio:
var sex = (document.form1.sex[0].checked)?
document.form1.sex[0].value : document.form1.sex[1].value;Обратите внимание, что у нас есть два элемента radio, которые находятся в массиве sex. Индексы у них 0 и 1. В данном скрипте мы проверяем, если у нас первый элемент включён (checked), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF. Разумеется, можно было бы написать и так:
var sex;
if (document.form1.sex[0].checked) sex = document.form1.sex[0].value;
else sex = document.form1.sex[1].value;Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег <form> атрибут "onSubmit" со значением "return check();". Данный атрибут будет делать следующее: перед отправкой формы вызывать функцию, которая должна будет вернуть либо true, либо false. Если она вернёт true, то форма отправится на сервер, а если false, то форма не будет отправлена.
Теперь создадим функцию check(), которая должна, во-первых, проверять полностью форму, сообщать пользователю об ошибках, а также возвращать true (если форма полностью правильная), либо false (если форма содержит ошибки).
function check(form) {
var firstname = form.firstname.value;
var pass = form.pass.value;
var message = form.message.value;
var rules = form.rules.value;
var file = form.fileupload.value;
var bad = "";
if (firstname.length < 3)
bad += "Имя слишком короткое" + "\n";
if (firstname.length > 32)
bad += "Имя слишком длинное" + "\n";
if (pass.length < 3)
bad += "Пароль слишком короткий" + "\n";
if (pass.length > 32)
bad += "Пароль слишком длинный" + "\n";
if (message.length < 3)
bad += "Сообщение слишком короткое" + "\n";
if (rules != "on")
bad += "Вы не согласились с правилами" + "\n";
if (file.length == 0)
bad += "Вы не выбрали файл для загрузки" + "\n";
if (bad != "") {
bad = "Неверно заполнена форма:" + "\n" + bad;
alert(bad);
return false;
}
return true;
}В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad, в которую записываем все некорректные данные. Затем идёт целый набор IF, которые проверяют поля в форме и записывают все ошибки в переменную bad. Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert()) с ошибками. И возвращаем false, чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true, чтобы форма была отправлена уже на обработку в "handler.php".
Как видите, проверка формы в JavaScript достаточно простое занятие. И главное здесь предусмотреть все возможные ошибки и обработать их соответствующим образом.
-
Создано 22.10.2010 11:05:13
-
Михаил Русаков
Комментарии (52):
Напиши пожалуйста отрывок кода, чтобы ясно было что и куда, связанный вот с этой строчкой "давайте добавим в тег <form> атрибут "onSubmit" со значением "return check();"".
Ответить
<form onsubmit = "return check();">
Ответить
Спасибо)
Ответить
там походу вместо pass += "Пароль слишком короткий" + "\n"; нужно поставить bad += "Пароль слишком короткий" + "\n";
Ответить
Да, спасибо большое! Исправлено.
Ответить
А как будет, что пользователь не поставил символ "@". Может быть вот так? if (email != "@") bad += "Вы не поставили символ '@'" + " ";. И нет разницы как поставить одинарные кавычки или двойные?
Ответить
Одинарные или двойные кавычки без разницы. А для проверки на наличие подстроки в строке используется метод indexOf().
Ответить
Значит как-нибудь так? if (email.indexOf=="@") bad += "Вы не поставили символ '@'" + ";
Ответить
Нет, if(email.indexOf("@") == -1)
Ответить
А этот весь PHP-код в отдельный файл вставлять?
Ответить
Здесь нет ни строчки PHP-кода. Всё это JavaScript.
Ответить
А этот JavaScript-код в отдельный файл нужно писать? Или можно куда-нибудь в голову документа например?
Ответить
JavaScript лучше отправить в отдельный JS-файл, однако, можно разместить и внутри тега <head>.
Ответить
И снова здравствуй! А если форму комментария обрабатывает JavaScript а не php-код, то поисковики будут индексировать такие комментарии или нет?
Ответить
Сделать на JavaScript комментарии - невозможно. Так как комментарии нужно каким-то образом сохранять в базу, либо в файл. Ни то, ни другое JavaScript делать не умеет.
Ответить
Изучайте Ajax! Для комментариев в связке с php самое то. Не всё ведь так просто
Ответить
Честно говоря ничего не понял. Что куда вставлять ( Кроме форм больше ничего не выыводится, соответственно и проверку сделать тоже не получается. Если не сложно, кто разобрался выложите архив с готовым скриптом. И просьба отдельно к автору, прикрепляйте в таким достаточно запутанных кодах архив с готовым скриптом. Думаю начинающим таким как я это очень поможет освоение.
Ответить
Вот здесь почитайте: http://myrusakov.ru/javascript-hello-world.html Про функции вот сюда: http://myrusakov.ru/sozdanie-funkcij-javascript.html На основании всего этого, сделайте то, что Вы хотите. У Вас не получается, потому что Вы не знаете ещё алфавита, а уже пытаетесь читать.
Ответить
Таки разобрался почему у меня не получалось, делал все правильно. Оказалась ошибка в коде, в строке function check(form) { Нужно исправить имя формы на function check(form1) {
Ответить
Добрый день. Прохожу этот курс как и задуманно автором. Сначала html, потом CSS, теперь JavaScript (php не изучал). Единственное, что не очень понятно - это назначение файла handler.php (это значение атрибута action в теге form). В спецификации html "action" - Адрес программы или документа, который обрабатывает данные формы. Поясните, пожалуйста, как этот файл задействуется в данном случае.
Ответить
Пока никак. Обработка формы подразумевается через серверный язык. Вот в PHP мы и будем обрабатывать данную форму, и там Вы всё поймёте.
Ответить
В атрибута onsubmit = "return check ();" функция check () должна иметь какие-либо параметры?
Ответить
Да, нужно форму передать. form1
Ответить
Я передал this и заработало.Спасибо.
Ответить
Добрый день! На этот сайт наткнулся в поисках чего-нибудь на javasript, чтобы в зависимости от введенного в поле формы пользователем числа скрипт создал необходимое количество полей для ввода других значений. Например, я хочу, чтобы пользователь на сайте вводил параметры параллелепипедов (ширина, высота, длина). Но за один раз можно ввести параметры нескольких объектов, так вот, чтобы не создавать форму с большим количеством полей ввода, надо, чтобы скрипт сам их создавал. Пользователь вводит туда значения и по сабмиту содержимое формы намыливается. Возможно ли такое? Спасибо!
Ответить
Для этого в javascript есть метод createElement(). С ним Вы можете динамически создать нужное количество элементов, в зависимости от того, что выбрал пользователь.
Ответить
Добрый день! возможно ли выводить результаты проверки формы в зависимости от того что ввел пользователь, без нажатия кнопки? то есть например писать имя при регистрации, и когда оно достигнет (по условиям) 5 символов, то надпись о том что "имя короче чем надо" изчезнет? пробовал сделать процедуру с циклом проверки , условия выхода из цикла в низу, активировал процедуру в самом конце body.
Ответить
Поставьте на поле обработчик onkeydown, в нём вызовите функцию, которая будет считать количество символов.
Ответить
Спасибо получилось, только когда сравниваешь две формы с паролем и подтверждением то последняя становится равной первой, по мнению функции, только когда длиннее первой на любой символ.
Ответить
Здравствуйте, Михаил. Я написал страницу для регистрации. В ней есть элементы textarea, radio button, button. В textarea есть текст с Условиями пользования, по щелчке на радио кнопку означает, что пользователь согласен с Условиями пользования. По щелчке на кнопку пользователь регистрируется. Вы не могли бы подсказать как сделать чтобы без щелчка по радио кнопке кнопка зарегистрироваться была не активной?
Ответить
Проверять нажатие на радиокнопку (хотя лучше там ставить чекбокс), и если он включён, то убрать disabled у кнопки. А по умолчанию на кнопке <input type="submit" disabled="disabled" />
Ответить
кнопка checkbox не работает : постоянно "on" показывает
Ответить
такая же проблема была. Ошибка была в том, что я работал со свойством .value (когда значение не отмечено в теге явно, то выводится значение по умолчанию = "on" ) вместо того, чтобы использовать .checked (отмечено: true | false)
Ответить
Как сделать, чтобы нажимая на кнопку Submit данные формы не стирались? Если ошибка ввода, то введенные данные не хочется вводить заново. Спасибо.
Ответить
Сохранять данные в сессию, например, а потом их выводить в форму. Впрочем, по этой теме я скоро напишу статью.
Ответить
Здравствуйте Михаил, не могли бы вы мне подсказать, как правильно проверить на PHP - что именно вернула JS-функция. Я имею в виду, как внедрить JS в PHP.
Ответить
http://myrusakov.ru/javascript-post.html
Ответить
Михаил, подскажите пожалуйста... <style id="height" type="text/css"> #main{ height:500px; } #test{ height: 440px; } </style> <script> $(document).ready(function() { function divresize(a) { var windowHeight = ($(window).height()-50); var b=$(a).html(); $(a).html(b.replace("height:500","height:"+windowHeight)) } divresize('#height') }); </script> такой скриптик заменяет height:500 на высоту окна браузера минус 50 пикс подскажите пожалуйста, как написать вторую такую замену, заменить height: 440 например на высоту окна браузера минус 70 пикс ? если просто копирую еще один блок с jQuery кодом - ничего не просходит...
Ответить
Какой блок копируете?
Ответить
Здраствуйте) мне уже помогли с етим вопросом, спасибо им, и Вам тоже) решение етого вопроса - <script type="text/javascript"> $(document).ready(function() { var windowHeight = $(window).height(); $('#main').css('height', windowHeight - 45); $('#test').css('height', windowHeight - 105); $('#wrapper').css('height', windowHeight - 80); }); </script>
Ответить
п.с. Михаил, последнее время в Вашей разсилке, письмо через письмо - приходит 2 раза (одновременно приходит 2 одинакових письма) ))
Ответить
Дело в том, что имеется несколько разных рассылок, но у них некоторые выпуски совпадают полностью, отсюда и повторы. Если быть подписанным только на одну рассылку, то повторов быть не должно.
Ответить
понял)) а может тогда название рассилки стоит писать в теме?) попонятнее будет народу))
Ответить
Михаил, помогите пожалуйста... Я хочу сделать проверку формы регистрации на JS, В форме есть каптча, символы которые в ней находятся хранятся в сессии. Как мне проверить на соответствие то что ввел пользователь со значением из сессии в JS?
Ответить
К сессии напрямую не получить доступ используя только js.
Ответить
Михаил, у меня вопрос. Как сделать чтобы при выборе определенного чекбокса соответственно менялся action обработки страницы?
Ответить
Можно, ставится обработчик на checkbox, далее вызывается функция JS, которая меняет атрибут action у form.
Ответить
для textarea надо проверять не value, а innerhtml
Ответить
Мне на нажатии возвращает на handler.php. Что с ним делать?
Ответить
обработчик написать)который письмо будет отсылать.
Ответить
Где-то, вроде даже на этом сайте, я читал, что после проверки формы на JS и отправки на сервер, данные нужно по новой проверить на сервере. Вопрос: зачем еще раз проверять данные, если можно всю валидацию перенести на JS?
Ответить
ВСЁ РАБОТАЕТ! Проблема была с return check(). Как оказалось, нужно было указать не return check(), а return check(form) или (form1) зависит от того, какое имя дали форме.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.