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 с установленной вами переменной, если что-то ложно. иначе вы будете придерживаться его первоначальной проверки, таким образом, вы можете продолжить.
При добавлении на сайт той или иной формы, к примеру, формы обратной связи, часто возникает необходимость проверки всех или некоторых полей перед отправкой на предмет их заполненности. Теоретически это можно сделать средствами PHP, однако использование JavaScript позволяет разгрузить серверный скрипт, перенеся все действие непосредственно в браузер пользователя.Предположим, что у нас есть небольшая форма, состоящая из двух input-ов (text и password), textarea и кнопки отправки (input submit). Наша задача – непосредственно перед отправкой формы проверить два первых input и textarea на пустоту. Если пустых полей не будет, то форма должна отправляться. Если пустые поля будут, то их необходимо обвести красной рамкой, вывести сообщение в виде alert о том, что необходимо заполнить все поля, а затем запретить отправку формы. После того, как пользователь уберет alert, цвет рамки полей должен вернуться в изначальное состояние. Красиво оформить саму форму Вам поможет сайт Жеки Несмелова .
Для того, чтобы все работало, как надо, к событию onsubmit формы привяжем возвращаемое функцией send() значение. Данная функция будет возвращать true или false в зависимости от того, все ли поля заполнены. Если вернется false, то при нажатии на кнопку форма не отправится, если true – то отправится. Заметьте, что мы не задаем полям id (так их бы было гораздо проще выцепить через DOM-модель JavaScript).
Проверка заполненности полей формы на JavaScriptТеперь переходим к JavaScript-коду. Здесь будет две функции. Первая функция send() осуществляет непосредственную проверку. По значению переменной valid мы поймем, заполнены ли все поля после того, как проверка окончится. В elems помещаем все элементы первой формы (индекс = 0) нашего документа. Вместо 0 можно использовать, к примеру, имя формы в виде строки (если оно задано). Далее в цикле проходим по всем элементам данной формы, попутно проверяя, является ли текущий элемент textarea, либо input с type = text || password. Если это так, то проверяем значение value данного элемента. Ведь именно в value будет лежать текст, введенный пользователем. Если value = пустой строке, то присваиваем border-у элемента красный цвет, а переменную valid ставим в false. В самом конце после прохождения всех элементов проверяем valid. Если там false – выводим alert, запрещаем отправку формы и подсвечиваем красным лишь те поля, которые не заполнены. В противном случае отправляем форму.
Вторая функция в JavaScript-коде будет выполняться сразу после загрузки документа. При наведении курсора мыши на форму (событие onmouseover) в цикле начнется перебор всех ее элементов. Если у какого-либо из элементов CSS-свойство border = "2px solid red", то ему присваивается значение по умолчанию (красный цвет убирается).
На этом все. Осталось только красиво оформить вашу форму!
Оставь комментарий, нажми «Мне нравится » («Like ») и «Сохранить », а я напишу для тебя еще что-нибудь интересное:)
Данный урок описывает, как создать 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 (
