<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Проверка формы в JavaScript

Проверка формы в 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 достаточно простое занятие. И главное здесь предусмотреть все возможные ошибки и обработать их соответствующим образом.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (51):

top1995 top1995 03.04.2011 00:45:05

Напиши пожалуйста отрывок кода, чтобы ясно было что и куда, связанный вот с этой строчкой "давайте добавим в тег <form> атрибут "onSubmit" со значением "return check();"".

Ответить

Admin Admin 03.04.2011 00:47:12

<form onsubmit = "return check();">

Ответить

top1995 top1995 03.04.2011 17:44:48

Спасибо)

Ответить

sync.o sync.o 20.04.2011 00:17:43

там походу вместо pass += "Пароль слишком короткий" + "\n"; нужно поставить bad += "Пароль слишком короткий" + "\n";

Ответить

Admin Admin 20.04.2011 00:20:04

Да, спасибо большое! Исправлено.

Ответить

Alim_(I) Alim_(I) 18.06.2011 20:26:06

А как будет, что пользователь не поставил символ "@". Может быть вот так? if (email != "@") bad += "Вы не поставили символ '@'" + " ";. И нет разницы как поставить одинарные кавычки или двойные?

Ответить

Admin Admin 18.06.2011 20:31:27

Одинарные или двойные кавычки без разницы. А для проверки на наличие подстроки в строке используется метод indexOf().

Ответить

Alim_(I) Alim_(I) 18.06.2011 20:42:52

Значит как-нибудь так? if (email.indexOf=="@") bad += "Вы не поставили символ '@'" + ";

Ответить

Admin Admin 18.06.2011 21:42:08

Нет, if(email.indexOf("@") == -1)

Ответить

Alim_(I) Alim_(I) 18.06.2011 22:03:49

А этот весь PHP-код в отдельный файл вставлять?

Ответить

Admin Admin 18.06.2011 22:04:57

Здесь нет ни строчки PHP-кода. Всё это JavaScript.

Ответить

Alim_(I) Alim_(I) 18.06.2011 22:06:11

А этот JavaScript-код в отдельный файл нужно писать? Или можно куда-нибудь в голову документа например?

Ответить

Admin Admin 18.06.2011 22:08:20

JavaScript лучше отправить в отдельный JS-файл, однако, можно разместить и внутри тега <head>.

Ответить

Adrenalin Adrenalin 18.10.2011 06:13:35

И снова здравствуй! А если форму комментария обрабатывает JavaScript а не php-код, то поисковики будут индексировать такие комментарии или нет?

Ответить

Admin Admin 18.10.2011 09:09:31

Сделать на JavaScript комментарии - невозможно. Так как комментарии нужно каким-то образом сохранять в базу, либо в файл. Ни то, ни другое JavaScript делать не умеет.

Ответить

brussens brussens 24.12.2011 21:36:18

Изучайте Ajax! Для комментариев в связке с php самое то. Не всё ведь так просто

Ответить

Drug Drug 19.01.2012 20:35:18

Честно говоря ничего не понял. Что куда вставлять ( Кроме форм больше ничего не выыводится, соответственно и проверку сделать тоже не получается. Если не сложно, кто разобрался выложите архив с готовым скриптом. И просьба отдельно к автору, прикрепляйте в таким достаточно запутанных кодах архив с готовым скриптом. Думаю начинающим таким как я это очень поможет освоение.

Ответить

Admin Admin 19.01.2012 20:38:28

Вот здесь почитайте: http://myrusakov.ru/javascript-hello-world.html Про функции вот сюда: http://myrusakov.ru/sozdanie-funkcij-javascript.html На основании всего этого, сделайте то, что Вы хотите. У Вас не получается, потому что Вы не знаете ещё алфавита, а уже пытаетесь читать.

Ответить

Drug Drug 19.01.2012 22:20:41

Таки разобрался почему у меня не получалось, делал все правильно. Оказалась ошибка в коде, в строке function check(form) { Нужно исправить имя формы на function check(form1) {

Ответить

star05 star05 20.05.2012 12:16:46

Добрый день. Прохожу этот курс как и задуманно автором. Сначала html, потом CSS, теперь JavaScript (php не изучал). Единственное, что не очень понятно - это назначение файла handler.php (это значение атрибута action в теге form). В спецификации html "action" - Адрес программы или документа, который обрабатывает данные формы. Поясните, пожалуйста, как этот файл задействуется в данном случае.

Ответить

Admin Admin 20.05.2012 12:57:06

Пока никак. Обработка формы подразумевается через серверный язык. Вот в PHP мы и будем обрабатывать данную форму, и там Вы всё поймёте.

Ответить

SVlasuik SVlasuik 15.08.2012 14:55:42

В атрибута onsubmit = "return check ();" функция check () должна иметь какие-либо параметры?

Ответить

Admin Admin 16.08.2012 01:15:24

Да, нужно форму передать. form1

Ответить

SVlasuik SVlasuik 16.08.2012 02:12:47

Я передал this и заработало.Спасибо.

Ответить

GresOfBase GresOfBase 21.08.2012 08:42:49

Добрый день! На этот сайт наткнулся в поисках чего-нибудь на javasript, чтобы в зависимости от введенного в поле формы пользователем числа скрипт создал необходимое количество полей для ввода других значений. Например, я хочу, чтобы пользователь на сайте вводил параметры параллелепипедов (ширина, высота, длина). Но за один раз можно ввести параметры нескольких объектов, так вот, чтобы не создавать форму с большим количеством полей ввода, надо, чтобы скрипт сам их создавал. Пользователь вводит туда значения и по сабмиту содержимое формы намыливается. Возможно ли такое? Спасибо!

Ответить

Admin Admin 21.08.2012 11:47:08

Для этого в javascript есть метод createElement(). С ним Вы можете динамически создать нужное количество элементов, в зависимости от того, что выбрал пользователь.

Ответить

andreiups andreiups 19.02.2013 03:12:01

Добрый день! возможно ли выводить результаты проверки формы в зависимости от того что ввел пользователь, без нажатия кнопки? то есть например писать имя при регистрации, и когда оно достигнет (по условиям) 5 символов, то надпись о том что "имя короче чем надо" изчезнет? пробовал сделать процедуру с циклом проверки , условия выхода из цикла в низу, активировал процедуру в самом конце body.

Ответить

Admin Admin 19.02.2013 08:51:52

Поставьте на поле обработчик onkeydown, в нём вызовите функцию, которая будет считать количество символов.

Ответить

andreiups andreiups 19.02.2013 14:27:52

Спасибо получилось, только когда сравниваешь две формы с паролем и подтверждением то последняя становится равной первой, по мнению функции, только когда длиннее первой на любой символ.

Ответить

@ivan @ivan 23.03.2013 14:01:43

Здравствуйте, Михаил. Я написал страницу для регистрации. В ней есть элементы textarea, radio button, button. В textarea есть текст с Условиями пользования, по щелчке на радио кнопку означает, что пользователь согласен с Условиями пользования. По щелчке на кнопку пользователь регистрируется. Вы не могли бы подсказать как сделать чтобы без щелчка по радио кнопке кнопка зарегистрироваться была не активной?

Ответить

Admin Admin 23.03.2013 15:06:47

Проверять нажатие на радиокнопку (хотя лучше там ставить чекбокс), и если он включён, то убрать disabled у кнопки. А по умолчанию на кнопке <input type="submit" disabled="disabled" />

Ответить

Юрий В Юрий В 29.03.2013 21:13:24

кнопка checkbox не работает : постоянно "on" показывает

Ответить

Spartak_Belarus Spartak_Belarus 05.04.2013 12:17:32

такая же проблема была. Ошибка была в том, что я работал со свойством .value (когда значение не отмечено в теге явно, то выводится значение по умолчанию = "on" ) вместо того, чтобы использовать .checked (отмечено: true | false)

Ответить

Spartak_Belarus Spartak_Belarus 05.04.2013 10:33:59

Как сделать, чтобы нажимая на кнопку Submit данные формы не стирались? Если ошибка ввода, то введенные данные не хочется вводить заново. Спасибо.

Ответить

Admin Admin 05.04.2013 11:27:26

Сохранять данные в сессию, например, а потом их выводить в форму. Впрочем, по этой теме я скоро напишу статью.

Ответить

andrew11 andrew11 03.06.2013 21:48:01

Здравствуйте Михаил, не могли бы вы мне подсказать, как правильно проверить на PHP - что именно вернула JS-функция. Я имею в виду, как внедрить JS в PHP.

Ответить

Admin Admin 04.06.2013 11:10:17

http://myrusakov.ru/javascript-post.html

Ответить

remox remox 29.06.2013 21:35:05

Михаил, подскажите пожалуйста... <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 кодом - ничего не просходит...

Ответить

Admin Admin 30.06.2013 05:57:24

Какой блок копируете?

Ответить

remox remox 02.07.2013 16:10:47

Здраствуйте) мне уже помогли с етим вопросом, спасибо им, и Вам тоже) решение етого вопроса - <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>

Ответить

remox remox 02.07.2013 16:13:56

п.с. Михаил, последнее время в Вашей разсилке, письмо через письмо - приходит 2 раза (одновременно приходит 2 одинакових письма) ))

Ответить

Admin Admin 02.07.2013 20:06:31

Дело в том, что имеется несколько разных рассылок, но у них некоторые выпуски совпадают полностью, отсюда и повторы. Если быть подписанным только на одну рассылку, то повторов быть не должно.

Ответить

remox remox 04.07.2013 16:27:10

понял)) а может тогда название рассилки стоит писать в теме?) попонятнее будет народу))

Ответить

alexandr_93 alexandr_93 02.09.2013 19:16:08

Михаил, помогите пожалуйста... Я хочу сделать проверку формы регистрации на JS, В форме есть каптча, символы которые в ней находятся хранятся в сессии. Как мне проверить на соответствие то что ввел пользователь со значением из сессии в JS?

Ответить

Admin Admin 02.09.2013 22:22:12

К сессии напрямую не получить доступ используя только js.

Ответить

torpedko torpedko 28.10.2013 21:28:59

Михаил, у меня вопрос. Как сделать чтобы при выборе определенного чекбокса соответственно менялся action обработки страницы?

Ответить

Admin Admin 29.10.2013 09:18:33

Можно, ставится обработчик на checkbox, далее вызывается функция JS, которая меняет атрибут action у form.

Ответить

sanda sanda 24.01.2014 18:53:42

для textarea надо проверять не value, а innerhtml

Ответить

1111g 1111g 29.11.2014 10:17:39

Мне на нажатии возвращает на handler.php. Что с ним делать?

Ответить

alexandrdante alexandrdante 29.11.2014 12:32:23

обработчик написать)который письмо будет отсылать.

Ответить

(Алекс) (Алекс) 16.01.2016 20:21:14

Где-то, вроде даже на этом сайте, я читал, что после проверки формы на JS и отправки на сервер, данные нужно по новой проверить на сервере. Вопрос: зачем еще раз проверять данные, если можно всю валидацию перенести на JS?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.