jquery-steps

jquery-steps copied to clipboard

I have a form at www.lgbtcm.com that uses Steps and form validation. I can get the form validation to work with an Ajax call to verify if a username or email is working but then it disables the ability to move to the next Step.

bemail: { validators: { notEmpty: { message: 'The email address is required' }, emailAddress: { message: 'The input is not a valid email address' }, remote: { url: '<?php echo get_bloginfo('url'); ?>/wp-admin/admin-ajax.php', type: "GET", message: 'This email is already in use', cache: false, async: false } } },

How can I get the Steps to work with the form.?? THANKS!

Same problem here... Please tell if you find a solution

+1

I have the same issue. The whole problem is that the onStepChanging function is supposed to return true or false. It is not designed to run an async code.

+1

//I was not worried, I just wrote:

var is_async_step = false;
$(document).ready(function ()
{
	var settings = {
		onStepChanging: ChangeStep
	};
	$("#wizard").steps(settings);
});

function ChangeStep(event, currentIndex, newIndex)
{
	if (is_async_step)
	{
		is_async_step = false;
		//Allow next step
		return true;
	}

	var arr = $("#form_tag_id").serializeArray();
	arr.push({ name: "one_more_field", value: "one_more_value" });
	$.post("", arr).done(function (data)
	{
		if(data != "ok")
		{
			return;
		}

		is_async_step = true;
		//trigger navigation event
		$("#wizard").steps("next");
	});

	//forbid the next step because $.post is an asynchronous function
	return false;
}

@hedgehed Thank you for your solution, I had been sick of searching the internet and no good, Your approach is simple and crisp. Thank you buddy !