[Resolved] How can I use my own validation script (JQuery validate) in CRED post form?

[Author]

Posts

[alixB]

Hello,

I'm trying to use JQuery validate instead of your validation script (parsley) on a CRED post form post but It's seem impossible to disable your validation script?

How can I disable parsley in toolset in order to use JQuery validate?
And How can I add custom attributes to CRED fields? Like data-whatiwant=whatever?

This tool is really good but I have the impression that it lacks flexibility for creating beautiful forms:(

Thank you

[Luo Yang]

Hello,

I assume we are talking about form fields outputted with shortcode [cred_field].
I don't think there is built-in feature within Toolset Forms plugin, see our document:
https://toolset.com/documentation/user-guides/cred-shortcodes/#cred_field

No such kinds of options to:
1) disable form validation script
2) add custom attributes to field's HTML tag

I have escalated this thread to check if it is an valid feature request, will update here if there is anything news.

[Luo Yang]

Here is the feedback from our 2nd tier supporters, you can submit both feature requests here:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Our developers will evaluate it.

Currently, you can try to setup those form field with HTML codes manually, and add your own jQuery validation script by follow their document:
hidden link

[Luo Yang]

For the second one:
add custom attributes to field's HTML tag

Our 2nd tier supporters want to know this:
why and what HTML attribute you need? Why do you think they are missing?

Thanks

[alixB]

Thank for you replies.

What I want to do is a multi-step form. When in the first fieldset, the fields are validated, the user can click on "Next" to display the next part of the form.
But to do this, I need some control on the validation script. I wanted to use JQuery Validate but it's not possible with your form render system. You use Parsley JS for form validation and It can't be disable.

Currently, for this shortcode :

[cred_field field='cand_mail' force_type='field' class='form-control']

the output is :

<input type="text" id="cred_form_4802_1-textfield-5-1564765074" name="wpcf-cand_mail" value="" class="wpt-form-textfield form-textfield textfield js-wpt-validate" output="" preset_value="" urlparam="" preview="" select_label="" edit_label="" value_escape="" make_readonly="" placeholder="adresse@mail.fr" select_text="" data-wpt-validate="{"required":{"args":{"1":true},"message":"Ce champ est requis."},"email":{"args":{"1":true},"message":"Veuillez entrer une adresse e-mail valide."}}" data-wpt-field-title="Adresse mail" data-parsley-required="true" data-parsley-required-message="Ce champ est requis." data-parsley-credfilesize="52428800" data-parsley-type="email" data-parsley-error-message="Veuillez entrer une adresse e-mail valide." data-wpt-type="textfield" data-wpt-id="cred_form_4802_1_cred_form_4802_1-textfield-5-1564765074" data-wpt-name="wpcf-cand_mail">

I have no control on the data-parsley-* attributes.

So, I get it, I will use your parsley lib and I tried to work with it to validate my form using an event (clic next). But the JS I entered into your JS editor is loaded before the parsley lib.. So I don't have any control here.

Is my last choice is to inject my script manually into the footer and hack my way into your view to have the result I want? Is there an easier solution to validate a form for a multi-step form?

[Luo Yang]

You can use JS event to to trigger a custom JS function, and in this JS function to change the attribute's value to what you want, for example:

jQuery(document).on( 'cred_form_ready', function() {  
        // ALL YOUR CRED form JS code goes here. Add your JS code here
	jQuery('input[name="wpcf-cand_mail1"]').attr('data-parsley-error-message', 'My custom message here ...');
});

More help:
hidden link