OnSubmit does not stop if auto javascript validation fails

Hello


I enabled js validaton in my custom form, I added an "auto javascript validation" event in the OnSubmit, gave it the name of the required fields.

When I submit my form it detectds empty required fields and shows error message based on field titles as I wanted, but it goes on in the next events of OnSubmit section (send email, show thanks message).

I've spent many time reading the faqs, tutorials, forums but did not find how to stop submit if auto javascript validation fails.

Regards
Loko

Hi Loko,

Please post a link to the form so I can take a quick look.

Bob

Hi Bob

Sorry for the delay I didn't get the notification for your reply.

Here is the form
http://www.oms-clisson.fr/nouveau_site/index.php?option=com_chronoforms&chronoform=resa_salle

I also upload its backup.

Thank you
Loko

Hi Loki,

I think this may be because the submit button is hidden when the page loads and so the validation doesn't find it. Try leaving it visible and see if the validation then works. If that is the problem You could hide or disable it with JavaScript after the page loads.

Bob

I disabled the javascript code that hides it on page load and tried again : I face the same issue 😟

Hi Loko,

That looks like a SEF URL problem, the link on the tooltip is just # which should do nothing but on your page it loads another page . . .

Bob

Hi Bob

Sorry I didn't understand what you mean. Which link on wich tooltip are you talking about ?

For instance I have an other form on the same server made with form wizard and javascript validation works fine :
http://www.oms-clisson.fr/nouveau_site/index.php?option=com_chronoforms&chronoform=contact

Hi Loki,

I'm sorry, I got mixed up.

Auto JavaScript Validation will only work in the On Load event. If you need to validate after the form is submitted then use the Auto Serverside Validation.

Bob

Hi Bob

Well, I move the auto javascript validation in the onLoad section and it does not work either.

There is a really strange thing with the form : I tried to turn off javascript validation in the form manager (not in the wizard) + to remove completly the auto javascript validation action in the event ... and I still get the same message "vous devez saisir une adresse e-mail" ("you must enter an email adresse"). I can't understand where this message comes from as I disabled and removed any validation in the form !

I guess this is not normal and makes the wanted validation not to appear/work.

Here is the updated backup of the form.

Thabnks
Loko

Hi Loko,

The message in the image below is a Joomla! System message created when you try to send an email with no To Email address. It has nothing to do with client-side JavaScript validation.

Bob

OK

So what are the steps to have custom form client-side validation ?

- I enabled validation in the form manager
- I added an auto javascript validation in the onLoad section, with field names in parameters
- the submit button is always visible

Is there any thing else to do to have validation work ? It does not at the moment.

Hi Loko,

The ChronoForms validation JavaScript files aren't being loaded on the page. Is that because you turned the validation off (see your earlier post)?

Bob

Hi Loko, hi Bob

I have the same problem.
My first form works propper, but every secondone does not stop with auto javascript validation.
I tried a copy of the first form, but I get the same result.

Frank

Hi Frank. Just to know : are thoses form made with custom code or with Wizard ?

Hi Loko,

i used the wizard.

OK.

Bob, could we have a step by step procedure to set up validation ? Do we have to include a "auto javascript validation" event in the onLoad section if we enabled the js validation in the form manager ? (we do not need this event with a wizard-created form).

Is there an issue with 2nd forms and so on ?

Hi Loko,

I put a reply into this FAQ

Bob

OK so I did everything in that faq.
I also deleted the firsts form so that the one I want become first, but it does not work either, so it's not a manner of being the first form on not like Frank.

I can't figure out what's missing to have validation work.

Hi Loko,

Please turn off the RokZipper plugin, it breaks the order in which scripts load.

The only time it would have anything to do with being the first form would be if you had more than one copy of the same form on the page; or you have more than one form on the page that use the same input names and ids.

Bob

we do not use RockZipper. We tried GZip at a moment but turned it off, and validation still does not work.
I also tried with a very basic joomla template.

Do you succeed to make it work if you create the form on your joomla install from the backup I uploaded ?

(we use latest 2.5.9 version)

Hi Loko,

The version I downloaded has no validation set up. It appears to work OK once I have turned on validation and added and configured an Auto JavaScript Validation action.

You can see it here - only the first four inputs are validated though.

Bob

Sorry if I uploaded that kind of version, I tried several things on and off.

That's a good point if it works on your system. Unfortunatly I double-checked that I turned validation on in the form setup and added an auto javascript validation in the onLoad event with the 4 first fields as you did, and it still does not work on my box.

Would you mind uploading the form you modified and put online so I can try it here ? If it does not work then we'll know the issue comes from outside CF, from a difference on ours joomla systems.

Hi Loko,

It's here - remember only the first four fields are validated and the validation is set to Blur & Submit to make testing simpler. I've attached a backup copy.

Bob

Everthing now works ! \o/

Your form backup made me understand that the autoJavascriptValidation step must be dragged before the showHtml one. I was not aware of this.

Thank you Bob for your much appreciate help.

Hi Loko,

I wasn't aware of that either - I have just got into the habit of putting actions in the order I want them to run and the Show HTML is almost always the last On Load action.

Bob

On my side, I tought that the showHTML step was the one that created the DOM elements, thus javascript stuff usually goes after.
I'll keep in mind to put it before.

Thanks again.

Hi Bob, hi Loko,

I restored the Backup from Bob, but always the same problem.

Now I take a look at the website with firebug.
I found this:
<form id="chronoform_resa_salle" class="Chronoform" method="post" name="resa_salle"

The code of my working form is:
<form id="chronoform_Kontakt" class="Chronoform hasValidation" method="post" name="Kontakt"

I tried nearly everything, but in the second form the class was class="Chronoform".
Is there any way to change the class?


Thanks
Frank

Hi FrankG,

Please post a link to the form so I can take a quick look.

Bob

Dear Bob,

I am still testing on localserver.

But I found the reason. It is the template from meembo. If I turn of the slideshow everything is fine. It seems to be a js-conflict.

Thank you
Frank

Hi FrankG,

I'm afraid that is a pretty common problem :-( Usually solvable though.

Bob