Forums

For some reason the javascript validations on my forms are not working. I have a simple chronoform form with a couple of fields. I have set all of them as Required. If I click on the Test Form menu, the validation works but if I go to the FrontEnd View, none of the validations are triggered. The page simply submits even when I have not entered any value in the fields. I see the same behavior in Chrome and IE.

Hi Jamoora,

You probably have a JavaScript error on the page. Check the Console in your browser Web developer tools to see if there is an error shown.

Bob

Hi Bob,

I did not write any javascript code for the validation. I just enabled the Required field validation provided by Chronoform. So, there shouldn't be any javascript error I would think. And if there was a javascript error, it should not work even in the Test Form mode, right?

Hi Jamoora,

No, you don't need to write new script to have an error or conflict.

And no, it will usually work in the Test Form view even if it is broken with the template loaded.

Bob

Hi Bob,

I checked the developer tool console and do not see any error. The class on the field has been set to class = " validate['required']". All the javascript files are also included in the head section of the page such as formcheck-yui.js, formcheck-max.js, mootools-core.js, mootools-more.js, core.js and modal.js.

I have a Joomla setup on my local computer also. The validation works like a charm there. Not sure what's missing on the production box.

Anything else that I should check? If you give me an email address, I can send you the url of the site I am having problem with.

Hi Jamoora,

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

Bob

Hi Bob,

Here is the form in the front end view where the validation DOES NOT work.
http://66.147.240.187/~eatrigh2/index.php?option=com_chronoforms&chronoform=test

And here is the same form in the test mode where the validation WORKS fine.
http://66.147.240.187/~eatrigh2/index.php?option=com_chronoforms&tmpl=component&chronoform=test

Hi Jamoora,

Your template (or some other component) is loading the jQuery JavaScript library.

this.form.getProperty is not a function
initialize(b="chronoform_test", a=Object { display={...}, onValidateSuccess=function()})formcheck-yui.js (line 1)
initialize()mootools-more.js (line 27)
b()mootools-core.js (line 141)
g()mootools-core.js (line 136)
(?)()index....rm=test (line 31)
fireEvent(f=function())mootools-core.js (line 375)
forEach(i=function(), v=Window index.php?option=com_chronoforms&chronoform=test)mootools-core.js (line 40)
fireEvent(e="domready", c=[], b=undefined)mootools-core.js (line 375)
g()mootools-core.js (line 514)
[Break On This Error]

...d[1];var e=c.value.replace(/[ \t\v\n\r\f\p]/m," ").replace(/[,.;:]/g," ").clean(...

formcheck-yui.js (line 1)

Out of the box jQuery isn't compatible with the MooTools library used by Joomla! and ChronoForms. You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest - which may or may not work - is to add a line of script in the ChronoForms Form JavaScript box:

jQuery.noConflict();

This will free the $ operator which is used by MooTools, so you may need to update your own javascripts to use the longer jQuery operator.

There is also a neat plugin named JB Library from Joomla! Bamboo that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode. However this requires that JQuery is loaded using the Joomla Document object methods.

I have a tutorial on Resolving jQuery problems that explores some of the issues an diagnostics and shows how to modify one template example to use the Joomla! Document methods to load JQuery in noConflict mode.

Hi Bob,

I downloaded your document Resolving jQuery problems and went through it. The following code fixed the issue and validation is working now.

window.addEvent('domready', function() {
  if (typeof jQuery != 'undefined'){
     jQuery.noConflict();
  }
});

Thank you so much for your help.

Hi Jamoora,

Great. good to hear that you got it working :-)

Bob