Form Validation

Regular Joined: Sep 03, 2010 Posts: 57

The headaches just don't quit. Wink

I have a form that I want to validate (both inline and on submit) and I've come across a very nice validation jquery plugin that I would love to use... however, I can't seem to get the thing to work at all.

The script is from Position Absolute
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

I've added this to the beginning

Code:

addCSSToHead('css/validationEngine.jquery.css', 'file');


addCSSToHead('css/template.css', 'file');


addJSToHead('js/jquery.validationEngine-en.js', 'file');


addJSToHead('js/jquery.validationEngine.js', 'file');


addJSToHead('http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js', 'file');

In the "inlineJS" I have this under my other code dealing with hidden divs

Code:

$(document).ready(function() {


            $("#requestform").validationEngine()


        });

Then... on one of my text inputs... I added the class which should make the field required among other things.

Code:

class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]"

Here is the form tag

Code:

echo '<form id="requestform" method="post" action="' . $module_file . '.php?name=' . $module_name . '"  enctype="multipart/form-data">'."\n";

I'm still new to RN and very new to jquery (thanks for the massive headache kguske Very Happy

You're right though... it's the way to go) so I don't quite see what I'm missing in order to get this to work.

Is this plugin compatible with RN or outdated? Is there a better way to validate?

Posted: Wed Sep 29, 2010 5:05 am

couple of things, you need to load jquery before any scripts that use jquery, and it's also possible that since you are loading jquery from googleapis that jquery is loading more than once (look at your html source). The addJSToHead system will keep scripts from loading twice, but not if they have different file paths.

Posted: Wed Sep 29, 2010 7:20 am

spasticdonkey wrote:

couple of things, you need to load jquery before any scripts that use jquery, and it's also possible that since you are loading jquery from googleapis that jquery is loading more than once (look at your html source). The addJSToHead system will keep scripts from loading twice, but not if they have different file paths.

Thanks for letting me know those things. On the subject of loading jquery first... prior to adding this code to the form... my other divs use jquery... but I didn't put any "addjstohead" above it. They worked perfectly fine without it which lead me to believe that jquery is being loaded even without the "addjs".

I just put the googleapis in there and brought my form as close to the validation form as I could bring it. I also tried

Code:

addJSToHead('../../../includes/jquery/jquery.js', 'file');

prior to the googleapis. Also tried it with no "addjstohead - jquery" as the other functions seemed to work without it. None worked.

The only thing I haven't tried is putting the "addjstohead - jquery" above all else.

Quote:

it's also possible that since you are loading jquery from googleapis that jquery is loading more than once (look at your html source).

Where would I see this in my html source? I don't understand what this quoted statement means or where you mean I should look. I don't believe I've loaded jquery anywhere else within my form.

Thanks for your insights... I'm flying blind as a bat right now.

Should I be wrapping the entire code within the <script> tags with the document ready function?

i.e.

Code:

inlineJS = <script>





      $(document).ready(function () {





    XXXXX Div codes here





        $("#requestform").validationEngine() 





});

Posted: Wed Sep 29, 2010 8:54 am

By view html source I meant to use your browser and select view - source then look at the scripts loaded in the head of the document. This is the example from ravennuke.com

Code:

<script type="text/javascript" language="JavaScript" src="includes/rn.js"></script>


<script type="text/javascript" language="JavaScript" src="includes/jquery/jquery.js"></script>


<script type="text/javascript" language="JavaScript" src="includes/jquery/jquery.colorbox-min.js"></script>


<script type="text/javascript">


   $(document).ready(function(){


      $(".colorbox").colorbox({opacity:0.65, current:"{current} of {total}"});


      $(".colorboxSEO").colorbox({opacity:0.50, width:"750", height:"300", iframe:true});


   });


</script>





<script type="text/javascript" language="JavaScript" src="includes/boxover/boxover.js"></script>


<script type="text/javascript" language="JavaScript" src="includes/jquery/jquery.hoverIntent.minified.js"></script>


<script type="text/javascript" language="JavaScript" src="includes/jquery/superfish.js"></script>


<script type="text/javascript" language="JavaScript" src="includes/jquery/supersubs.js"></script>


<script type="text/javascript" language="JavaScript" src="includes/jquery/nukeNAV.js"></script>

The order the scripts load is important, notice jquery.js is loaded before the other scripts that require jquery. In your example you were loading jquery.min.js after scripts that need jquery loaded first.

Code:

addJSToHead('js/jquery.validationEngine-en.js', 'file');


addJSToHead('js/jquery.validationEngine.js', 'file');


addJSToHead('http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js', 'file');

Check to make sure you are not laoding jquery.js and ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

at current the system isn't really setup to use a CDN for jquery, as several scripts and addons will also attempt to load the jquery.js that is included in the distro.

I would probably recommend just using the jquery included in the distro

Code:

addJSToHead('includes/jquery/jquery.js', 'file');


addJSToHead('js/jquery.validationEngine-en.js', 'file');


addJSToHead('js/jquery.validationEngine.js', 'file');

also, there could be other issues that are breaking your form, a link (if possible) would help Wink

Posted: Wed Sep 29, 2010 8:59 am

Gotcha. Never thought about doing that.

Here's what's being loaded at present:

Code:

<link rel="alternate" type="application/rss+xml" title="Forums" href="http://www.xxxxx.com/modules.php?name=Feeds&amp;fid=2&amp;type=RSS20" />


<link rel="alternate" type="application/rss+xml" title="News" href="http://www.xxxx.com/modules.php?name=Feeds&amp;fid=1&amp;type=RSS20" />


<link rel="StyleSheet" href="css/validationEngine.jquery.css" type="text/css" />


<link rel="StyleSheet" href="css/template.css" type="text/css" />


<link rel="StyleSheet" href="./themes/ravennuke.css" type="text/css" />


<link rel="StyleSheet" href="./themes/SimplyBlue/style/style.css" type="text/css" />


<link rel="StyleSheet" href="includes/jquery/css/colorbox.css" type="text/css" />


<link rel="StyleSheet" href="includes/nukeSEO/nukePIE.css" type="text/css" />


<link rel="StyleSheet" href="includes/jquery/css/nukeNAV.css" type="text/css" />


<link rel="StyleSheet" href="themes/SimplyBlue/style/nukeNAV.css" type="text/css" />


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine-en.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine.js"></script>


<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>





<script type="text/javascript" language="JavaScript" src="includes/rn.js"></script>


<script type="text/javascript">

Posted: Wed Sep 29, 2010 9:07 am

hard to see there, need to see the entire section loading the js files. Although

Code:

<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine-en.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine.js"></script>

are loading before jquery so they will not work that way. If you are going to use ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js make sure it loads first; and make sure jquery isnt loaded a 2nd time later on. See previous post Smile

Posted: Wed Sep 29, 2010 9:11 am

spasticdonkey wrote:

hard to see there, need to see the entire section loading the js files. Although

Code:

<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine-en.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine.js"></script>

are loading before jquery so they will not work that way. If you are going to use ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js make sure it loads first; and make sure jquery isnt loaded a 2nd time later on. See previous post Smile

Right... I haven't had a chance this morning to correct that... I will try it now.

---------------------------

Now i've tried it with this and still no dice.

Code:

<link rel="StyleSheet" href="css/template.css" type="text/css" />


<link rel="StyleSheet" href="./themes/ravennuke.css" type="text/css" />


<link rel="StyleSheet" href="./themes/SimplyBlue/style/style.css" type="text/css" />


<link rel="StyleSheet" href="includes/jquery/css/colorbox.css" type="text/css" />


<link rel="StyleSheet" href="includes/nukeSEO/nukePIE.css" type="text/css" />


<link rel="StyleSheet" href="includes/jquery/css/nukeNAV.css" type="text/css" />


<link rel="StyleSheet" href="themes/SimplyBlue/style/nukeNAV.css" type="text/css" />


<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine-en.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine.js"></script>





<script type="text/javascript" language="JavaScript" src="includes/rn.js"></script>


<script type="text/javascript">

I think i'm missing something that ties my form to the validation engine... but it seems as if

Code:

$("#requestform").validationEngine()

should do that.

What other information can I provide to you so that you can better see the issue?

Posted: Wed Sep 29, 2010 9:28 am

Just tried putting a fresh copy of jquery in the same directory and loading it. Still no dice

Code:

<script type="text/javascript" language="JavaScript" src="jquery-1.4.2.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine-en.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine.js"></script>





<script type="text/javascript" language="JavaScript" src="includes/rn.js"></script>


<script type="text/javascript">

Really leads me to believe that there is something else missing from either the <script> or the form tag binding the two together.

Posted: Wed Sep 29, 2010 10:54 am

If this is all that is included in the JS section of your head then something is wrong Sad

Code:

<script type="text/javascript" language="JavaScript" src="jquery-1.4.2.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine-en.js"></script>


<script type="text/javascript" language="JavaScript" src="js/jquery.validationEngine.js"></script>





<script type="text/javascript" language="JavaScript" src="includes/rn.js"></script>


<script type="text/javascript">

I'm not sure all the jquery used in RN will work with jQuery 1.4.2... I suggest you download the older version of this script
http://www.position-relative.net/creation/formValidator/formValidator1.6.2.zip
which is stable with jQuery 1.3.2 (what RN uses)
then forget about loading jquery 1.4.2

then, assuming this is being used in a custom module, the beginning of my index.php might look like so

Code:

if (!defined('MODULE_FILE')) die ('You can\'t access this file directly...');


require_once("mainfile.php");


$module_name = basename(dirname(__FILE__));


define('RN_MODULE_HEAD', 'ModuleLevelAddon.php');


include("header.php");

which will load modules/YOUR_MODULE/ModuleLevelAddon.php
move all your script stuff there, which might look like:

Code:

addCSSToHead('css/validationEngine.jquery.css', 'file');


addCSSToHead('css/template.css', 'file');


addJSToHead('includes/jquery/jquery.js', 'file');


addJSToHead('js/jquery.validationEngine-en.js', 'file');


addJSToHead('js/jquery.validationEngine.js', 'file');


$inlineJS = '<script type="text/javascript">


$(document).ready(function() {


            $("#requestform").validationEngine()


        });


</script>'."\n";


addJSToHead($inlineJS,'inline');

Posted: Wed Sep 29, 2010 11:04 am

Hmm... maybe it is because I had v1.7 ?? (unstable??) Maybe that is it. I'll try the 1.6.2 version of the script and see if that makes any difference. Thanks for the insight... I'll report back once I get the chance to play with it.

Posted: Wed Sep 29, 2010 12:20 pm

Alright.... I tried setting eveything up the way you suggested... same results. My other jquery stuff works fine.. the validation engine stuff.. no dice.

For better reference... I've taken screen shots of how the file structure is setup along with the code I've used. I'll explain below.

Green - The script that inserts the form information into the database and generates an email to the admin with form contents.

Blue - The form page

Red - The suggested .php with the js.

This is the code I used within the suggested php to get the form validated. I also tried ('../includes/jquery/jquery.js', 'file');

This is the overall file structure of the module. I put the js & css folders in the "root" of the module along with the suggested php. The form & insert .php's are within the public folder.

The only other thing I've noticed differing is that they call a class in the form tag in their index.html (along with differing id's... I also tried putting the same class in my form tag)

--------------

Validation Settings within the "jquery.validationEngine.js"

Code:

settings = jQuery.extend({


        allrules:allRules,


        validationEventTriggers:"blur",                    


        inlineValidation: true,    


        returnIsValid:false,


        animateSubmit:true,


        unbindEngine:true,


        ajaxSubmit: false,


        promptPosition: "topRight",    // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight


        success : false,


        failure : function() {}


    }, settings);    


    $.validationEngine.settings = settings;

Inline is set to true and the trigger is set to blur... w/e that means.

Posted: Wed Sep 29, 2010 12:31 pm

the path to the included files needs to be from the site root.. If the JS and CSS files are located inside your module, then you need to correct the paths:

Code:

addCSSToHead('modules/YOUR_MODULE/css/validationEngine.jquery.css', 'file');


addCSSToHead('modules/YOUR_MODULE/css/template.css', 'file');


addJSToHead('includes/jquery/jquery.js', 'file');


addJSToHead('modules/YOUR_MODULE/js/jquery.validationEngine-en.js', 'file');


addJSToHead('modules/YOUR_MODULE/js/jquery.validationEngine.js', 'file');

replacing YOUR_MODULE with your actual module name

Posted: Wed Sep 29, 2010 12:39 pm

Boy don't I feel like a n0b. Sheeesh. Thanks for helping me stumble out of stupidville.

On a different note... what part of texas are you hailing from? (would love to buy you a drink if you live close enough to me (houston area) for your troubles)

Posted: Wed Sep 29, 2010 1:20 pm

haha, that's cool. I'm outside of San Antonio, but I'll let you know if I make it over that way.. I was as close as La Grange a few weeks ago, but that's still pretty far from Houston; and not exactly a "hot spot" Wink

Posted: Wed Sep 29, 2010 1:28 pm

Well... depends on what's "hot". Where ya fishing or hunting? Wink

(i'm not into those "hot spot" type things... with age comes wisdom and I'm 65 in the head... 30 in body)

I don't make to many trips to the SA area... but we do try to make it once a year or so for the river. If for w/e reason I come that way... I'll try my hardest to setup a time n' date or something to buy you a few beers/glasses of whiskey... granted you're of drinking age. Wink

I really do appreciate your help with this issue... I guess I'm still newer that I lead myself to believe I was.

Posted: Mon Oct 04, 2010 3:37 pm

Spasticdonky-(or anyone who might know)

I have a question for you if you happen to know the answer.

Do you know anything about adding form element via jquery? Every tutorial I can seem to find deals with extending the form vs. adding predefined elements.

I would imagine the coding is very similar but not sure. Thanks.

Posted: Mon Oct 04, 2010 4:18 pm

let's see, I remember looking at one that was kinda cool, where the entire form is generated by JS.

http://mattnull.com/formation

an example of use

Code:

$(document).ready(function(){


   $("#new_form").formation();


   $.formation.addInput({type:"text",labelValue:"First Name:",required:true});


   $.formation.addInput({type:"text",labelValue:"Last Name:",required:true});


   $.formation.addInput({type:"text",labelValue:"E-mail:",validation:'email',required:true});


   $.formation.addInput({type:"text",labelValue:"Age:",validation:"number"});


   $.formation.addRadios(["Mac","Linux","Windows","Ubuntu"],{


         required:true,


         labelValue:"Your favorite OS:",


         legend:"Operating Systems"


   });


   $.formation.addCaptcha({


      captchaQuestions: {


         '5 + 5 = ?' : '10',


         'What color is the sky?':'blue', 


         '2 + 2 = ?' : '4'


         },


      required:true


   });


   $.formation.addTextarea({


      name:"my_textarea",


      labelValue:"Describe yourself",


      required:true,


      cols:"60",


      rows:"10"


   });


   $.formation.setErrorMessages({number:"Please enter a number."});


   $.formation.addButton({value: "CLICK ME"});      


}

only downside is it doesn't work with JS disabled.

Posted: Mon Oct 04, 2010 6:23 pm

Well... I'm not so much worried about the js being disabled... I have that base covered Wink

That example shows how it's done automatically... which won't work in this case.

Back to the dang ol' checkboxes I go... Sad

When validating my form.... the validation engine is just oh so ripe.... we love it. There's a catch though... I can't validate hidden elements.

I.e. I have 3 checkboxes that hide or show div based on selection. Now... I can't validate those fields because of the hidden aspect of those divs. So... as a solution to that... I'm trying to append the form on the fly to add the fields to the form dynamically (based on checkbox checked state).

Test code:

Test div (div being appended)

Code:

echo '<div id="test">';


echo '<td>';


echo '<input type="checkbox" id="testchk" name="testchk>';


echo '</td>';


echo '</div>';

Now the jquery to make it happen

Code:

$("#testchk").click(function () {


      if ($("#testchk").is(":checked"))


      {


      $("#test").append(<input type="text" size="20" id="text1" name="textname1 />);


      }else{


         $("#test").remove("test");  


      }


});

The error lies within the (<input type="text" size="20" id="text1" name="textname1 />) because I can change it to (test) and it adds that to the form in the div.

Once to can append the document with inputs... I can then associate the validation engine class with html that is being appended.

I hope all that made sense... I'm not sure that anyone has ever used this type thing in RN before.

----------------------------------------------------

Edit..... scratch all that... figured it.

Only one set of " " needed within the ( ). Wink

Posted: Mon Oct 04, 2010 7:43 pm

Ahhh holy heck.... i'm catching on. Wink

To preface... i gave up on that Position Absolute validation engine. To much of a headache. Using the regular validation now.

Figured out how to validate hidden fields by adding the class on the fly.

for me... my checkbox is the trigger.

Goes within your InlineJS:

Code:

$("#chk").click(function () {


      if ($("#chk").is(":checked")){


            $("#testtext").rules("add", "required");


         }else{


      $("#testtext").rules("remove", "required");  


   }


});

Simply adds/removes the rules based on the chk status

I know you salty dogs probably already have this stuff figured... but while looking for an answer to this I searched the forums and didn't find anything close... this is for those who look in the future.

Posted: Tue Oct 05, 2010 8:44 am

Hrmm... another issue with validation... shouldn't be a big problem.

It's with the placement. I've checked jquery's website on this and tried using their code with a variety of different variations trying to get this to place the error under the field just how RN's your account modules does with no luck.

Is the jquery code compatible/outdated? Or is there something else i'm missing in order to get it to work correctly with RN?

Original Code:

Code:

$("#myform").validate({


  errorPlacement: function(error, element) {


     error.appendTo( element.parent("td").next("td") );


   },


   debug:true


 })

Here's how i've got my setup. (tried to get it as close to theirs as I possibly could.

Head:

Code:

addJSToHead('includes/jquery/jquery.validate.js', 'file');


addCSSToHead('includes/css/cmxform.css', 'file');

InlineJS:

Code:

$(document).ready(function(){


    $("#requestform").validate({


        errorPlacement: function(error, element) {


           error.appendTo( element.parent("td").next("td") );


   },


   debug:true


 });





});

Html on form: (note** the form tag has a class of "cmxform")

Code:

echo '<table align="center" border="0" cellpadding="2" cellspacing="2">'."\n";


echo '<tr><td><label>Testing</label></td>';


echo '<td><input type="text" id="testtext" class="required" name="testtext /></td>';


echo '<td></td></tr>';


echo '</table>';

It shows to the right of the field perfectly fine... but that shifts the form elements to the left to do so which is unattractive.

Everything works except for the error message placement. The field is validated, it highlights red... & the field gets the focus... just no error message below it.

--------------------------------------------------------

Solved...

using a label with the "error" class and some css to hide on load... the error placement is correct now.