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

[Author]

Posts

[andyK-6]

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

[Nigel]

Hi Andy

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

[andyK-6]

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

[andyK-6]

Nigel,

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

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

But with the wpt validate funciton.

[Nigel]

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.

[andyK-6]

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

[Nigel]

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.

[andyK-6]

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