Skip Navigation

[Resolved] How to include form validation on a split form

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client has a CRED form "split" into separate pages, which is done with JavaScript to hide the non-current sections. Validation messages cannot then be seen on the hidden sections.

Solution:
It is not possible without either adding custom validation, or by trying an alternate way of creating multi-part forms, as described below: https://toolset.com/forums/topic/cred-form-jquery-validation-use-the-wpt-validator-only-for-visible-form-part/#post-628652

This support ticket is created 6 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 7 replies, has 2 voices.

Last updated by andyK-6 6 years, 9 months ago.

Assisted by: Nigel.

Author
Posts
#628039

Tell us what you are trying to do?
I splited a form in 3 parts. The validator on the end don't show failure in the 1&2part!
White the jquery.validator its possible to check only the visible part of a form. Is that possible to with the wpt-validator?

Is there any documentation that you are following?
no

Is there a similar example that we can see?
no

What is the link to your site?
hidden link

#628232

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Andy

Can I ask what technique you are using to split your form into 3 parts?

#628397

Hi Nigel

JS. I made 3 DIV's.
I splited the form in 3 parts, and 2 of them are hidden.
With the buttons [weiter=forward] & [zurück=back] at the end of the form i define the state(hidden or not) of the parts.

And at part 3 is the original submit button from toolset. But if the customer forget a field in part 1, he can have no massage or iinformation thats in part 1.

best regards
andy

#628402

Nigel,

Just to be sure. I'am looking for something like this:

$("#myform").validate({
ignore: ":hidden"
});

But with the wpt validate funciton.

#628652

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Andy

I'm struggling to see how this could work in the way you have divided the form by hiding sections.

My advice to split the CRED forms works differently.

Let's say you have a form you want to split into 3 sections.

First you make a CRED post form to publish the post that contains just the fields of the first section, with a button that says "Next".

This "Next" button is actually a normal submit button, and when the form is submitted a post is created.

Any validation (e.g. required fields) for this first step is performed with the form submission.

The form settings should redirect to display the published post after submission.

But... instead of the post itself being displayed you display a CRED edit form to edit this new post, and this edit form contains the fields required for section 2 of your form. It has a next button which will update the existing post with the new fields. It will again redirect to display the updated post, and we will employ the same technique to show a third CRED form, which is an edit form that only contains the fields required for the final section.

The trick here is that you need a little custom PHP using the CRED API to add a URL parameter that will trigger displaying the CRED edit forms instead of the actual post after the redirects.

CRED edit forms must live inside a Content Template to provide the right context, so in this case you will create two edit forms and so you will need to add these to two Content Templates: make a note of the IDs of the Content Templates.

Then you can use code like this to chain together the sections of your form:

/**
 * Redirect to edit post published by CRED form
 */
add_filter('cred_success_redirect', 'tssupp_edit_published_post', 10, 3);
function tssupp_edit_published_post($url, $post_id, $form_data) {
 
    $suffix = "";

    // step 1
    if ( 123 == $form_data['id'] ) { // ID of initial CRED publish form
        $suffix = '?content-template-id=456'; // ID of CT with first edit form
    }

    // step 2
    if ( 321 == $form_data['id'] ) { // ID of first CRED edit form
        $suffix = '?content-template-id=654'; // ID of CT with second edit form
    }
 
    return $url.$suffix;
}

Note that you will have to edit the IDs of the CRED forms and the Content Templates holding the CRED edit forms.

Does that make sense? Let me know if you have any problems implementing it.

#628655

Hi Nigel

A had this version before. But for customer who are not logged this version is a problem!
Guests cannot edit post or drafts.

But look at the following link, it must be possible to validate only the visible elements.

https://stackoverflow.com/questions/19218211/jquery-validate-only-the-elements-which-are-visible

#628805

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

OK, understood.

Unfortunately the Toolset validation is hard-coded in the plugins, it is not amenable to changing how it works.

I think you will need to remove the validation requirements that you have added with Toolset and set up your own validation instead.

You can take advantage of HTML5's built-in validation by simply adding the appropriate attributes to the form inputs (e.g. required, type="email", etc.).

Unfortunately when fields are inserted via shortcode in the CRED form you cannot edit the markup that is generated to include such attributes, and so you would need to add them via some JavaScript when the DOM is ready.

It is not an elegant solution but I don't see any alternative.

You will be glad to know that updating CRED forms to allow multi-part forms is on our road map.

#629054

Hi Nigel,

With this options, i will show the hole form. And later when the Toolset is ready for multi-parts, i change it.

Thanks for your help.
all the best