Menu icon Foundation
Abide With Multi-Step Webform Validation

Hi,

I have a webform which is broken down into multiple steps. I am using Abide to handle JS validation and alerts to the user. My question is this:

Can I use abide to check if all of the required fields are valid (IE: Filled in) then show the next button to the next step in the form?

Here is some example code:

<section id="section-1">

<!-- FORM FIELDS --> 

<!-- HIDDEN BUTTON -->
<a class="button hide" href="#section-2">Next</a>
</section>

<section id="section-2">

<!-- FORM FIELDS --> 

<!-- HIDDEN BUTTON -->
<a class="button hide" href="#section-3">Next</a>
</section>

<!-- ETC -->
            

         

As you see the 'Next' button is hidden. What I want is the next button to become visible ONLY when all required fields in section-1 are validated. Otherwise the next button never becomes visible.

Another option would be the next button is visible but will show an error if clicked and not all fields are filled in.

Is either option possible with Abide? If so can you help point me in the right direction or post an example?

abideformsmuilti-step forms

Hi,

I have a webform which is broken down into multiple steps. I am using Abide to handle JS validation and alerts to the user. My question is this:

Can I use abide to check if all of the required fields are valid (IE: Filled in) then show the next button to the next step in the form?

Here is some example code:

<section id="section-1">

<!-- FORM FIELDS --> 

<!-- HIDDEN BUTTON -->
<a class="button hide" href="#section-2">Next</a>
</section>

<section id="section-2">

<!-- FORM FIELDS --> 

<!-- HIDDEN BUTTON -->
<a class="button hide" href="#section-3">Next</a>
</section>

<!-- ETC -->
            

         

As you see the 'Next' button is hidden. What I want is the next button to become visible ONLY when all required fields in section-1 are validated. Otherwise the next button never becomes visible.

Another option would be the next button is visible but will show an error if clicked and not all fields are filled in.

Is either option possible with Abide? If so can you help point me in the right direction or post an example?

Zack over 4 years ago

I'm working on a very similar problem. Here are the solutions I can think of so far:
1. Break up the form into multiple forms
2. create a custom callback for each input or set of inputs in each "chunk" of the form (not quite sure if this would work or not)
3. Create a custom submit function which would, on valid, submit the form, but on invalid, it would relocate (AJAX) to the page/step the error is on. Then the next/back buttons wouldn't particularly matter other than semantically separating the information.

It would be nice to have a "$('input').abide(method: validate())" function, which would return a TRUE or array or objects with errors. But that doesn't seem to exist anywhere that I can see.

Zack over 4 years ago

Here's my latest solution. Keep in mind this is a total hack, and is probably no the best way to do things, but since I'm validating server-side, too, I'm going to allow it.

The subsections of my form are split up into fieldsets, and they're all single level (no fieldsets are embedded in other fieldsets), so you may have to adjust for your needs.

 //blur all the required fields to hit the abide live validation
$('#myNextButton').click(function(){
$(this).parents('fieldset').find(':input[required]').blur();
if($(this).parents('fieldset').find(':input[data-invalid]').length==0){
//valid, move to next step
}
else
{
//invalid, don't move to next step (abide will display the errors)
});

Hope that helps you out!

Alejandro about 4 years ago

Hi there Zack, i was reading your last answer, and as i´m not a developer, i´m really intrigued how does your fix works, i mean how can i implement it in an example. I have a form that will have 3 steps, so i just want to show only first step, once every completed ok, click on next button then and jump to second step and so on.
Apart from separate every step into fieldset, then i should...

Thanks for your time m8

regards

Rafi Benkual almost 4 years ago