Forums

Validation not working

Jamoora 22 Apr, 2012
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.
GreyHead 22 Apr, 2012
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
Jamoora 22 Apr, 2012
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?
GreyHead 22 Apr, 2012
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
Jamoora 25 Apr, 2012
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.
GreyHead 25 Apr, 2012
Hi Jamoora,

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

Bob
GreyHead 27 Apr, 2012
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.
Jamoora 02 May, 2012
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.
GreyHead 03 May, 2012
Hi Jamoora,

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

Bob
This topic is locked and no more replies can be posted.