Как сделать проверку полей формы. Проверка формы ajax перед отправкой как
Данный урок описывает, как создать JavaScript форму, которая проверяет правильность заполнения посетителем полей перед отправкой данных на сервер. Сначала мы объясним, почему проверка заполнения формы является полезной методикой, а затем построим простой пример с объяснением, как все происходит.
Зачем нужна проверка заполнения формы?Проверка заполнения формы - процесс, при котором данные формы проверяются перед обработкой. Например, если Ваша форма имеет поле, в которое пользователь должен ввести email адрес, возможно Вы захотите проверить, что поле заполнено, прежде чем начать дальнейшую обработку формы.
Существует два основных метода для проверки заполнения формы: на стороне сервера (с использованием CGI скриптов, ASP и т.д.) и на стороне клиента (обычно используется JavaScript). Проверка на стороне сервера более безопасная, но в большинстве случаев требует более сложного кода, в то время как проверка на стороне клиента выполняется проще и быстрее (браузер не нуждается в соединении с сервером для проверки заполнения формы, таким образом, пользователь получает немедленный ответ в случае пропущенных полей, которые необходимо заполнить).
Проверка формы на стороне клиента. Обычно выполняется с помощью встроенного JavaScript скрипта.
Проверка формы на стороне сервера. Обычно выполняется с помощью CGI или ASP скрипта.
В данном уроке мы построим простую форму с проверкой на стороне клиента с помощью JavaScript. Вы сможете затем адаптировать ее под свои нужды.
Простая форма с проверкой.Давайте построим простую форму с проверкой заполнения с помощью скрипта. Данная форма имеет одно текстовое поле "Ваше имя" и кнопку для отправки данных. Наш скрипт проверяет, что пользователь ввел свое имя перед тем, как отправить данные на сервер.
Откройте форму и посмотрите в действии. Попробуйте нажать кнопку "Отправить данные" ничего не вводя в поле "Ваше имя".
Страница содержит функцию JavaScript, которая называется validate_form(). Она выполняет проверку заполнения формы. давайте посмотрим сначала на форму.
ФормаПервая часть формы - тэг form
Форма имеет имя contact_form. С его помощью мы получим доступ к форме из JavaScript функции проверки.
Форма использует постметод для отправки данных в htm-файл заглушку, который просто выводит сообщение. В действительности Вы можете пересылать данные Вашему CGI скрипту, ASP странице и т.д. (например для отправки почты).
Также тэг form содержит onsubmit атрибут для вызова JavaScript функции проверки validate_form (), когда нажимается кнопка "Отправить данные". Функция возвращает логическое значение, для которого true означает "проверка прошла успешно", а false - "данные задержаны". Таким образом мы можем предотвратить отправку данных формы, если пользователь не заполнил ее правильно.
Остальной код формы добавляет поле ввода contact_name и кнопку "Отправить данные":
Пожалуйста введите Ваше имя.
Ваше имя:
Функция validate_form()Функция проверки формы validate_form() встроена в секцию head вначале страницы:
Первая строчка () указывает браузеру, что далее идет код JavaScript, а коментарий HTML (
Вот и готова наша проверка. Теперь после того, как все данные введены отправляем нашу форму нам на почту.
В файл index.php
пишем php-код:
Очень часто возникает необходимость добавления формы на сайт, ведь форма - это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в JavaScript мы и займёмся в этой статье.
Давайте для начала создадим форму, которую потом будем проверять:
Ваше имя:
Ваш пароль:
Ваш пол:
Выберите число:
1
2
3
Ваше сообщение:
Согласитесь с нашими правилами:
Загрузите файл:
Вот такая форма. Надеюсь, что с HTML Вы знакомы и объяснять, думаю, ничего не стоит. Если что-то непонятно, то посмотрите на работу этого кода в браузере.
Теперь поговорим о том, как получать значения из полей формы. Ведь прежде, чем их проверить, надо узнать, что написал там пользователь. Общий вид получения доступа к полю форму такой:
Document.имя_формы.имя_поля.value;
То есть сначала обращаемся к объекту Document , затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля . Давайте выведем все поля, которые подчиняются этому общему виду:
Var form = document.form1;
document.write(form.firstname.value + "
");
document.write(form.pass.value + "
");
document.write(form.number.value + "
");
document.write(form.message.value + "
");
document.write(form.rules.value + "
");
document.write(form.hidefield.value + "
");
document.write(form.fileupload.value + "
");
document.write(form.sub.value + "
");
document.write(form.but.value + "
");
Это все поля, которые имеют свойство value , и к которым можно получить доступ таким образом.
Теперь поговорим об одном особенном элементе формы - radio . Получим доступ к значению radio :
Var sex = (document.form1.sex.checked)?
document.form1.sex.value: document.form1.sex.value;
Обратите внимание, что у нас есть два элемента radio , которые находятся в массиве sex . Индексы у них 0 и 1 . В данном скрипте мы проверяем, если у нас первый элемент включён (checked ), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF . Разумеется, можно было бы написать и так:
Var sex;
if (document.form1.sex.checked) sex = document.form1.sex.value;
else sex = document.form1.sex.value;
Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег атрибут "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 ".
0
Я делаю запрос на перекрестный домен ajax на свою php-страницу на сервере. Я отправляю форму из html через ajax на мою страницу php на сервере. Проблемы с проверкой на стороне клиента.
Я не знаю, как сделать валидацию на стороне клиента перед отправкой формы.
HTML форма стандартной формы, размещение полей ввода: имя, фамилию, сообщение.... My HTML форма, на стороне клиента:
var output = $(".nesa");
$(document).ready(function(){
$("#form1").submit(function (e) {
e.preventDefault();
$.ajax({
url: "http://www.example.com/form.php",
crossDomain: true, //set as a cross domain requests
type: "post",
data: $("#form1").serialize(),
beforeSend: function(){
// add spinner
$(".spinner").append("
");
},
success: function (data) {
$(".nesa").html(data);
alert("sent " + data);
},
error: function(){
output.text("Message is not sent!");
}
});
});
});
Как валидации? Я пытаюсь поставить код в sendmail, но безуспешно. Или возможно использовать submitHandler?
Идея - это когда пользователь нажимает кнопку «Отправить», этот запуск проверки и если не удается «вставить адрес электронной почты». Теперь, когда я нажимаю кнопку отправки, вы отправляете данные на сервер. Я хочу, чтобы первые поля ввода проверяли.
Эта форма является фактической работой с отправкой данных на сервер, но просто нужно выяснить, как сделать валидацию. Где поставить валидацию в ajax-вызов?
Благодаря
- 5 ответов
Сортировка:
Активность
0
Пожалуйста, подтвердите форму перед отправкой запроса 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.
0
Во-первых, вы действительно используете форму 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 .
1
Создайте функцию для проверки формы, возвращающей true/false. Вызовите функцию непосредственно перед $ .ajax. проверить, если возвращение ложно, то вернуть.. смотрите пример ниже...
If(!validateForm()) return false;
0
Я всегда проверять их прямо перед тем, как ввести их в вызов 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 с установленной вами переменной, если что-то ложно. иначе вы будете придерживаться его первоначальной проверки, таким образом, вы можете продолжить.
