Проверить все формы на заполнение js. Валидация или проверка полей формы на ошибки и заполнение

Я делаю запрос на перекрестный домен ajax на свою php-страницу на сервере. Я отправляю форму из html через ajax на мою страницу php на сервере. Проблемы с проверкой на стороне клиента.

Я не знаю, как сделать валидацию на стороне клиента перед отправкой формы.

HTML форма стандартной формы, размещение полей ввода: имя, фамилию, сообщение.... My HTML форма, на стороне клиента:

Как валидации? Я пытаюсь поставить код в sendmail, но безуспешно. Или возможно использовать submitHandler?

Идея - это когда пользователь нажимает кнопку «Отправить», этот запуск проверки и если не удается «вставить адрес электронной почты». Теперь, когда я нажимаю кнопку отправки, вы отправляете данные на сервер. Я хочу, чтобы первые поля ввода проверяли.

Эта форма является фактической работой с отправкой данных на сервер, но просто нужно выяснить, как сделать валидацию. Где поставить валидацию в ajax-вызов?

Благодаря

5 ответов

Сортировка:

Активность

Пожалуйста, подтвердите форму перед отправкой запроса AJAX. Если нет ошибки, тогда ajax-запрос должен быть отправлен, иначе return false. Вы можете сделать так:

$("#form1").submit(function (e) { e.preventDefault(); // Get the Login Name value and trim it var name = $.trim($("#name").val()); // Check if empty of not if (name === "") { alert("Text-field is empty."); return false; } });

Вы также можете сделать функцию OnKeyUp.

Во-первых, вы действительно используете форму AJAX?

Вы объяснили, что вы загружаете форму через AJAX, но отправляете ли вы ее так же? Мне кажется, что вы пытаетесь отправить HTML-код. Вы можете подключиться к кнопке отправки click event перед отправкой формы. Однако, поскольку кнопка добавляется на страницу во время выполнения, вам необходимо зарегистрировать событие на document .

$(document).on("click", "input", function() { // Validate form // Add error message on fail, and return // Else submit form via AJAX });

В любом случае, вы можете использовать jQuery"s blur event в качестве альтернативы для проверки каждого поля, когда пользователь переходит к следующему. Вы можете даже проверять каждый раз, когда пользователь нажимает клавишу с keypress .

Создайте функцию для проверки формы, возвращающей true/false. Вызовите функцию непосредственно перед $ .ajax. проверить, если возвращение ложно, то вернуть.. смотрите пример ниже...

If(!validateForm()) return false;

Я всегда проверять их прямо перед тем, как ввести их в вызов AJAX. Вот мой экзамен

$("#form_nieuwsbrief").bind("submit",function(){ var name = $("input").val(); var email = $("input").val(); var proceed = true; if (name==""){ $("input").css({"border":"2px solid red"}); proceed = false; } if (email==""){ $("input").css({"border":"2px solid red"}); proceed = false; } if(proceed == false){ $("#msg").append("U bent informatie vergeten in te vullen."); setTimeout(function(){ $(".alert").fadeOut(400, function(){ $(this).remove(); }) ;},10000); } if(proceed == true){ // make the ajax call

Это просто информационный бюллетень, который просто запрашивает имя и адрес электронной почты. Но принцип тот же. Перед выполнением вызова ajax создайте оператор if else с установленной вами переменной, если что-то ложно. иначе вы будете придерживаться его первоначальной проверки, таким образом, вы можете продолжить.

«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.

Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.

На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.

Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

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

Обязательное поле

Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.

Пример 1. Атрибут required

HTML5 IE 10+ Cr Op Sa Fx

Обязательное поле

Логин:

Пароль:

Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.

Рис. 1. Обязательное поле не заполнено

Корректность данных

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

Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

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

Пример 2. Корректность данных

HTML5 IE 10+ Cr Op Sa Fx

Корректность данных

Заполните форму (все поля обязательны)

Имя:

Email:

Сайт:

Opera проверяет элемент формы только при наличии атрибута name.

Что происходит в Opera при вводе неверных данных показано на рис. 2.

Рис. 2. Предупреждение о неправильных данных

Шаблон ввода

Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение . Некоторые типовые значения перечислены в табл. 1.

В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

Пример 3. Шаблон ввода

HTML5 IE 10+ Cr Op Sa Fx

Ввод цвета

Введите шестнадцатеричное значение цвета (должно начинаться с #)

На рис. 3 показано предупреждение в браузере Chrome.

Рис. 3. Введённые данные не соответствуют шаблону

Отмена валидации

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

Пример 4. Отмена валидации

HTML5 IE 10+ Cr Op Sa Fx

Атрибут novalidate

Для аналогичной цели применяется и атрибут formnovalidate , который добавляется к кнопке для отправки формы, в данном случае к тегу . В этом случае форма из примера 4 будет иметь следующий вид.

Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.

Как видите, пока все поля не будут заполнены, скрипт не даст отправить форму, к тому же в поле для e-mail должен быть введен корректный адрес. Для начала я покажу как сделать простую проверку на заполненность полей без проверки e-mail. Вдруг в вашей форме нет этого поля и вам нужно проверить просто текстовое поле, чтобы оно не было пустое и на почту не приходили пустые уведомления.

Для осуществления задуманного, нам нужно для начала создать саму форму. У Вас она уже может быть, если вы захотите данный материал внедрить в нее, нужно будет его адаптировать под вашу форму. Я же покажу все на своем примере. Моя форма ничего не будет отправлять, в этой статье нет обработчика для отправки писем, чтобы не усложнять материал. Обработчик отправки писем, это другая история. Для начала сам HTML код формы.

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

id="file_form" - айди для нашей формы. ID - обязателен, он будет тоже использоваться в скрипте.
- обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
onclick="frmotpr();" - событие, которое будет запускать функцию из нашего скрипта, при нажатии на кнопку. Данное событие добавлено к кнопке ОТПРАВИТЬ . Предпоследняя строка в коде.
Всем полям тоже присвоены ID и классы. Они тоже понадобятся для нашего скрипта валидации. ID для поля с e-mail особенно важен для нашего будущего скрипта, что будет проверять правильность введенного e-mail.

Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.

#file_form{ width:300px; background:#fff; padding:15px; margin:3px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,.1); border:1px solid #36c; } .in_pl{ width:90%; margin-bottom:15px; padding:10px 15px; border-radius:25px; border:none; box-shadow:0 0 5px rgba(0,0,0,.2) inset; background:#fff; } .in_pl:focus{ background:#fff; } #sub_f{ padding:5px 15px; border:none; border-radius:25px; box-shadow:0 0 2px 1px rgba(0,0,0,.2); background:#36c; color:#fff; cursor:pointer; } #sub_f:hover{background:#333;} .fl_fr{ width:100%; text-align:center; font-size:15px; color:#333; cursor: pointer; border:none; margin-bottom:10px; } #messenger{ text-align:center; display:none; color:#f00; margin:15px 0; } .notvalid{background:rgba(255,0,0,.2);}

Данный стили задают параметры для самой формы, полей, кнопки. Расписывать все строчки, каждая для чего - не буду, для этого есть учебники по CSS. Распишу лишь два самых основных.

#messenger - это стили для того самого блока с выводом сообщений. Главный параметр для этого класса - это display:none. Тоесть мы изначально скрываем блок.
.notvalid - это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.

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

Так как наш скрипт работает с помощью jQuery , нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:

Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье - .

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