Fails Validation But Still Submits

I am running 4.0 RC2, and trying to get validation to work. I set it to on blur and submit, and if I tab out of a field I get the required bubble, and if I click submit the error bubble shows for a second but then the form submits anyways... It is not a jQuery conflict. Anyone else had this? Thanks.

Hi sequoiaims,

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

Bob

All local in MAMP right now...
Though I found something, I had unset all the default mootools and head scripts to include my own in order. I was calling mootools from Google Ajax libs.. I tried removing that and left original mootools in and it works. Any idea why that would be?

Hi sequoiaims,

I don’t see why using the Google APIs would cause the problem you describe. Must be some kind of mismatch :-(

Happy to have a look when you have a live version.

Bob

Hi,
I am having a similar problem. My form will not validate but still submits. I never get error messages and it submits even if required fields are not entered. Please help.

http://swim-aust.creativecuriosity.com.au/index.php/kids-club/join-kids-club.html
u: admin
p: website

Big thanks in advance.
Ches

Hi Ches,

Your template (or some other component) is loading the jQuery JavaScript library. 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 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 Joomla! 1.5 system plugin named SC jQuery that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode.

Bob

Hi Bob,

Thanks for the help.
Because I have jQuery on my site template, I had to use your fix on my template instead of the specific JS code box for the form.
To get the solution I had to wrap all jQuery functions in the noConflict function. I also had to change all $ to "jQuery".

<script type="text/javascript">
        jQuery.noConflict();
	jQuery(document).ready(function(){
            jQuery.preloadCssImages();
            jQuery("#scrolling-menu").show();
            jQuery("div.items").click(function(){ window.location = jQuery(this).attr("url"); });
        }); 
</script>

..... I have never been so happy to see an error message!

Thanks again.
Ches

Hi Ches,

Nice solution - it's always tricky to find the 'right' place to apply the jQuery fix.

Bob