Доработка формы оформления заказа

[Светлана Г.]

Здравствуйте!

Есть сайт на Wordpress c купленой темой http://new.mega-topas.ru/.

Обнаружилась некоторая недоработка при оформлении заказа: на шаге "Детали оплаты" есть форма с данными покупателя. Если какое-то обязательное поле не заполнено, то только на последнем шаге, после нажатия "Оформить заказ", пользователь об этом узнает. Ему выдается окно с незаполненными полями. А самой формы нет. И не понятно, что покупателю делать дальше.

Я бы хотела исправить эту ситуацию так, надеюсь, это правильно: показать это окно с предупреждением и одновременно сделать активной форму. Нужно написать небольшой скрипт на jQuery, но я не сильна в программировании.

 

Буду очень благодарна за помощь!

 

 

[Veseloff]

http://yandex.ru/yandsearch?text=jqurey%20form%20validation%20plugin

[Светлана Г.]

http://yandex.ru/yandsearch?text=jqurey%20form%20validation%20plugin

Думаю, что это излишне. Валидация там и так есть. Просто нужно скриптом определить, что если ul.woocommerce-error есть, добавить класс.active блоку #billing-box и содержащему его li. Вот этот код у меня не получается.

 

Все этапы оформления - это фактически одна и та же страница, по типу табов.

 

Вот скрипт управления всем процессом:

//Checkout Page	$('#login-box').prev('.woocommerce-info').remove();	$('#login-box').prependTo('.checkout-box');		if (!$('#login-box').length) {		$('.block-progres-line li:first-child').addClass('disabled').removeClass('active');		$('.block-progres-line li:first-child').next().addClass('active');		$('#billing-box').addClass('active');	}		$('.block-progres-line a').click(function(event){		var li = $(this).parent('li'),				id = $(this).attr('href');				event.preventDefault();				if (!li.hasClass('active') && !li.hasClass('disabled')) {			$('.block-progres-line li').removeClass('active');			li.addClass('active');			$('.checkout-section').removeClass('active');			$(id).addClass('active');			if (id == '#order-box') {				$(id).closest('#order_review').addClass('order-box-active');			} else {				$('#order_review').removeClass('order-box-active');			}		}	});		$('.checkout-box').on('click', '.next-step', function(event){		var stepId = $(this).attr('href');				event.preventDefault();		$('.block-progres-line li').removeClass('active');		$('.block-progres-line li a[href="' + stepId + '"]').parent('li').addClass('active');		$('.checkout-section').removeClass('active');		$(stepId).addClass('active');	});	

Edited December 12, 2014 by Светлана Г.

[Светлана Г.]

Как я могу проверить наличие элемента ul.woocommerce-error на странице после отправки формы?

Edited December 13, 2014 by Светлана Г.

[Q4Dizzy]

http://ramzes.ws/blog/nekotorye-tonkosti-metoda-submit

if($("ul.woocommerce-error").length > 0)

Edited December 13, 2014 by Q4Dizzy

[Светлана Г.]

 

http://ramzes.ws/blog/nekotorye-tonkosti-metoda-submit

if($("ul.woocommerce-error").length > 0)

А зачем точка перед ul?

 

Я такой код писала, но не срабатывает.

 

 

jQuery(function($){if($('ul.woocommerce-error').length > 0){$('#billing-box').addClass('active');}});

Edited December 13, 2014 by Светлана Г.

[Q4Dizzy]

показать это окно с предупреждением и одновременно сделать активной форму.

 

В идеале надо переписывать - когда пользователь ввёл данные - при переходе на следующий шаг проводить проверку. а не на последнем шаге)

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

[Q4Dizzy]

jQuery(function($){ if($('ul.woocommerce-error').length > 0){ $('#billing-box').addClass('active'); } });

 

Так а проверку элемента в какой момент проверять надо? при каком событии?

[Светлана Г.]

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

Не знаю, вообще, возможно ли это. Может показывать форму при другом условии.

Edited December 13, 2014 by Светлана Г.

[Q4Dizzy]

jQuery(function($){

 

так это равнозначно событию ready. Код то скорее всего работать должен, просто событие выбрано не то.

 

Добавьте к кнопке следующего шага в табе Детали оплаты какой-либо класс и вешайте на него обработчик.

[Светлана Г.]

Вот такой код срабатывает только при повторной отправке формы:

jQuery(function($){$( "form.checkout" ).submit(function( event ) {  if ( $( 'ul.woocommerce-error').length > 0 ) {    $('#billing-box').addClass('active');    return;  }});});

Хоть что-то .

Теперь это должно сработать сразу же после нажатия на "Оформить заказ". Как это осуществить?

[Q4Dizzy]

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

[Светлана Г.]

Вот так? Не работает, к сожалению.

jQuery('#form.checkout').submit(function(e) {    this.submit();    setTimeout(function() {if ( $( 'ul.woocommerce-error').length > 0 ) {    $('#billing-box').addClass('active');  }    }, 100);});

[Q4Dizzy]

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

 

Я не знаю, есть ли какие-либо классы или ещё что-либо у обязательных полей, потому допущу, что у них есть класс required и таких полей много.

 

Если их много - разумнее применить цикл и нужными условиями и действиями.

 

http://jsfiddle.net/dtfLcezL/

 

Заметка -

e.preventDefault()

Прерывает обычное поведение элемента. В случае с submit - это отправка данных на сервер. Вообще смотреть нужно на структуру страницы, что бы под неё писать скрипт.