Данный урок описывает, как создать 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-код:
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 с установленной вами переменной, если что-то ложно. иначе вы будете придерживаться его первоначальной проверки, таким образом, вы можете продолжить.