Перейти к содержимому


Валидация Required До Отправки Аякс Запроса

Автор kost_t-human, 01 сент. 2014 16:04

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 kost_t-human

kost_t-human

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 01 Сентябрь 2014 - 16:04

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

Суть проблемы:
Есть форма быстрого заказа на странице товара
http://b42943.storel...альто?from=ZWJl

  <form action="" method="post" class="contacts">
 
	<div class="formblock">
	  <div style="padding: 8px 20px 0px 10px;">ФИО<span style="color: orange;">*</span></div>
	  <input id="reg_name" name="form[contact][person]" value="{ORDER_FORM_CONTACT_PERSON}" maxlength="100" class="required input-text"  type="text"/>
	</div>

	 <div class="formblock">
	  <div style="padding: 8px 20px 0px 10px;">Телефон для связи<span style="color: orange;">*</span></div>
	  <input id="sites_client_phone" name="form[contact][phone]" value="{ORDER_FORM_CONTACT_PHONE}" maxlength="255" class="required input-text"  type="text"/>
	</div>
   
	<div class="formblock">
	  <div style="padding: 8px 20px 0px 10px;">E-mail{% IF ORDER_FORM_CONTACT_WANT_REGISTER %}*{% ENDIF %}</div>
	  <input id="contactEmail" name="form[contact][email]" value="{ORDER_FORM_CONTACT_EMAIL}" maxlength="255" class="{% IF ORDER_FORM_CONTACT_WANT_REGISTER %}required{% ENDIF %} email input-text" type="text"/>
	</div>
   
	<br>
	<div class="formblock">
	  <input name="go" class="goContacts" type="button" value="Заказать" />
	</div>
  </div> 

  </form>

она отправляет данные с помощью этого скрипта

$(function() {
		$('.goContacts').click(function() {
//alert('hi');
				regName = $('#reg_name').val();
				contactEmail = $('#contactEmail').val();
				phone = $('#sites_client_phone').val();
// Быстрый заказ
				function quickorder(formSelector) {
// Находим форму, которую отправляем на сервер, для добавления товара в корзину
						var formBlock = $($(formSelector).get(0));
// Проверка на существование формы отправки запроса на добавление товара в корзину
						console.log(formBlock);
// Получаем данные формы, которые будем отправлять на сервер
						var formData = formBlock.serializeArray();
// Сообщаем серверу, что мы пришли через ajax запрос
						formData.push({name: 'ajax_q', value: 1});
// Так же сообщим ему, что нужно сразу отобразить форму быстрого заказа
						formData.push({name: 'fast_order', value: 1});
// Аяксом добавляем товар в корзину и вызываем форму быстрого заказа товара
						$.ajax({
								type: "POST",
								cache: false,
								url: formBlock.attr('action'),
								data: formData,
								success: function(data) {
//console.log(regName);
										$('.oform').hide();
										d = $(".oform").html(data);
										console.log(d);
										$(d).find('#reg_name').val(regName);
										$(d).find('#contactEmail').val(contactEmail);
										$(d).find('#sites_client_phone').val(phone);
										$(d).find('.buttons-set .submit').click();
								}
						});
						return false;
				}
				quickorder('.goodsDataForm');
		});

});

так вот проверка такого вида
<input required id="contactEmail" name="form[contact][email]" value="{ORDER_FORM_CONTACT_EMAIL}" maxlength="255" class="{% IF ORDER_FORM_CONTACT_WANT_REGISTER %}required{% ENDIF %} email input-text" type="text"/>
не проходит, выскакивает сообщение о неверном заполнении, но форма все равно отправляется
при этом с главной или из каталога все отправляется и проверяется как нужно

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

Прошу помощи, голову себе уже сломал=(

#2 kost_t-human

kost_t-human

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 01 Сентябрь 2014 - 17:41

проспался я, всем спасибо)

$(function() {
		$('.goContacts').click(function() {
				regName = $('#reg_name').val();
				contactEmail = $('#contactEmail').val();
				phone = $('#sites_client_phone').val();
// Быстрый заказ
if ( phone != '' && regName != '' ) {
и далее по списку.
:ph34r:

этож надо было так тупить :D

#3 kost_t-human

kost_t-human

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 01 Сентябрь 2014 - 17:47

Но вопрос по событию  required остается открытым
чтобы, так сказать, все по фэншую)

#4 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 02 Сентябрь 2014 - 00:56

Не совсем понятен вопрос относительно атрибута required. Вместо строки

<input required id="contactEmail" name="form[contact][email]" value="{ORDER_FORM_CONTACT_EMAIL}" maxlength="255" class="{% IF ORDER_FORM_CONTACT_WANT_REGISTER %}required{% ENDIF %} email input-text" type="text"/>

вы можете использовать

<input name="form[contact][email]" value="{ORDER_FORM_CONTACT_EMAIL}" maxlength="255" class="{% IF ORDER_FORM_CONTACT_WANT_REGISTER %}required{% ENDIF %} input-text" type="email" required="required" />

только понадобится заменить кнопку

<input name="go" class="goContacts" type="button" value="Заказать" />

на

<input name="go" class="goContacts" type="submit" value="Заказать" />

а событие

$(function() {
				$('.goContacts').click(function() {
//alert('hi');
								regName = $('#reg_name').val();
								contactEmail = $('#contactEmail').val();
								phone = $('#sites_client_phone').val();
// Быстрый заказ
								function quickorder(formSelector) {
// Находим форму, которую отправляем на сервер, для добавления товара в корзину
												var formBlock = $($(formSelector).get(0));
// Проверка на существование формы отправки запроса на добавление товара в корзину
												console.log(formBlock);
// Получаем данные формы, которые будем отправлять на сервер
												var formData = formBlock.serializeArray();
// Сообщаем серверу, что мы пришли через ajax запрос
												formData.push({name: 'ajax_q', value: 1});
// Так же сообщим ему, что нужно сразу отобразить форму быстрого заказа
												formData.push({name: 'fast_order', value: 1});
// Аяксом добавляем товар в корзину и вызываем форму быстрого заказа товара
												$.ajax({
																type: "POST",
																cache: false,
																url: formBlock.attr('action'),
																data: formData,
																success: function(data) {
//console.log(regName);
																				$('.oform').hide();
																				d = $(".oform").html(data);
																				console.log(d);
																				$(d).find('#reg_name').val(regName);
																				$(d).find('#contactEmail').val(contactEmail);
																				$(d).find('#sites_client_phone').val(phone);
																				$(d).find('.buttons-set .submit').click();
																}
												});
												return false;
								}
								quickorder('.goodsDataForm');
				});
});

на

$(function() {
				$('form.contacts').submit(function() {
//alert('hi');
								regName = $('#reg_name').val();
								contactEmail = $('#contactEmail').val();
								phone = $('#sites_client_phone').val();
// Быстрый заказ
								function quickorder(formSelector) {
// Находим форму, которую отправляем на сервер, для добавления товара в корзину
												var formBlock = $($(formSelector).get(0));
// Проверка на существование формы отправки запроса на добавление товара в корзину
												console.log(formBlock);
// Получаем данные формы, которые будем отправлять на сервер
												var formData = formBlock.serializeArray();
// Сообщаем серверу, что мы пришли через ajax запрос
												formData.push({name: 'ajax_q', value: 1});
// Так же сообщим ему, что нужно сразу отобразить форму быстрого заказа
												formData.push({name: 'fast_order', value: 1});
// Аяксом добавляем товар в корзину и вызываем форму быстрого заказа товара
												$.ajax({
																type: "POST",
																cache: false,
																url: formBlock.attr('action'),
																data: formData,
																success: function(data) {
//console.log(regName);
																				$('.oform').hide();
																				d = $(".oform").html(data);
																				console.log(d);
																				$(d).find('#reg_name').val(regName);
																				$(d).find('#contactEmail').val(contactEmail);
																				$(d).find('#sites_client_phone').val(phone);
																				$(d).find('.buttons-set .submit').click();
																}
												});
												return false;
								}
								quickorder('.goodsDataForm');
								return (false);
				});
});

#5 kost_t-human

kost_t-human

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 03 Сентябрь 2014 - 12:22

Да, спасибо!

Но так то почему то дальше заказ не идет как раньше, выскакивает форма что в аттаче и далее 4 шага заказа.
сделал в все в точности http://b42943.storel...альто?from=ZWJl
До этого же все происходило так
вводим данные и если обязательные поля заполненны, то перекидывает сразу на оформленный заказ

Прикрепленные изображения

  • Безымянный.jpg

#6 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 04 Сентябрь 2014 - 00:24

В данном случае проблема возникает из-за вложенности форм. Найдите в вашем шаблоне "Товар" следующий код

Скрытый текст

и замените его на

Скрытый текст

Обратно в Другие вопросы


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Другие вопросы
  4. Privacy Policy