By digibritt on

Hello.

I'm trying to get a form to use jQuery Tool's form validator: http://flowplayer.org/tools/validator/

I'm pretty sure I have everything set as it should be, but no effect seems to be taking place. I can click submit on the form without filling out any fields and it goes straight to the thank you page.

Here is my form HTML:

<form action="salesforce_url_here" method="POST" id="form_ID" novalidate>

The "novalidate" is the FF4 fix.

Here is the call to the tools js file in template.php:

      drupal_add_js('sites/all/themes/our_theme/js/jquery.tools-current.min.js',
        array('type' => 'inline', 'scope' => 'header', 'weight' => -50)
      );

I'm sure my weight is too high into the negative... just trying to make sure it loads before others, although it still didn't make it to the top...

Lastly, here is the call to the validator, also in template.php just a few lines down from the above:

      drupal_add_js(
        'jQuery(document).ready(function() {
            jQuery("#form_ID").validate();
        })'
      , 'inline'
      );

I may be going about this the wrong way...

It would be nice if this worked for D7: http://drupal.org/node/1114130 ... but not sure if that would solve the problem either. When I firebug the tools js file is in fact being loaded...

Not familiar with this, but maybe go this route: http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_ad...

Well, if someone can give me some suggestions I would *really* appreciate it! I'm pretty stumped at this point. Should mention I'm a beginner to JS and Drupal... so if you could post code examples and/or explain things very simply that would be awesome.

⋅ Categories: Drupal 7.x

Comments

reecemarsland’s picture

reecemarsland commented

You could try adding an alert to make sure your inline JS is being fired. Also don't you need a ; after closing your .ready call. i.e the 4th line should be });' 

drupal_add_js(
        'jQuery(document).ready(function() {
            alert('testing');
        });'
      , 'inline'
      );
Anonymous’s picture

Anonymous (not verified) commented

Your weight is definitely too high, chances are it will load before jQuery which will stop it working altogether. Check the source and see where it's being outputted, if it's above jQuery you know you've got a problem. Also have you made sure that the version of jQuery tools you're using is compatible with the version of jQuery your website is using. If you need jQuery 1.5+ you can install the jquery_update module.

One last thing...have you checked for js errors in your browser when you click the submit button?

digibritt’s picture

digibritt commented

Thanks for the help y'all. I tried each of your suggestions today and it did not change the form behavior in any way. The JS is indeed being executed on the page, in the right order (first the library, then the tools).

Does anyone have any other ideas? Or alternative solutions to validating a form in Drupal using jQuery Tools Validator? I've spent waaay too much time on this!

vood002’s picture

vood002 commented

I got it to work by adding the required attribute to required form items...assuming Drupal 7 doesn't add this attribute automatically (I'm using 6).

This worked for me:

<?php
Drupal.behaviors.mitek_form_control = function (context) {
  $(".form-item .required").attr('required','required');
  $("#mitek-salesforce-form").validator({
    messageClass:	'validation-error'
  });
}
?>