Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> JavaScript
Author Message
mefoo
Regular
Regular



Joined: Sep 03, 2010
Posts: 57

PostPosted: Tue Sep 28, 2010 7:06 pm Reply with quote

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 [ Only registered users can see links on this board! Get registered or login! ]

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?
 
View user's profile Send private message
spasticdonkey
RavenNuke(tm) Development Team



Joined: Dec 02, 2006
Posts: 1693
Location: Texas, USA

PostPosted: Wed Sep 29, 2010 5:05 am Reply with quote

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.
 
View user's profile Send private message Visit poster's website
mefoo







PostPosted: Wed Sep 29, 2010 7:20 am Reply with quote

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()

});
 
spasticdonkey







PostPosted: Wed Sep 29, 2010 8:54 am Reply with quote

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


Last edited by spasticdonkey on Wed Sep 29, 2010 9:01 am; edited 1 time in total 
mefoo







PostPosted: Wed Sep 29, 2010 8:59 am Reply with quote

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">
 
spasticdonkey







PostPosted: Wed Sep 29, 2010 9:07 am Reply with quote

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
 
mefoo







PostPosted: Wed Sep 29, 2010 9:11 am Reply with quote

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?
 
mefoo







PostPosted: Wed Sep 29, 2010 9:28 am Reply with quote

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.
 
spasticdonkey







PostPosted: Wed Sep 29, 2010 10:54 am Reply with quote

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 [ Only registered users can see links on this board! Get registered or login! ]
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');
 
mefoo







PostPosted: Wed Sep 29, 2010 11:04 am Reply with quote

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.
 
mefoo







PostPosted: Wed Sep 29, 2010 12:20 pm Reply with quote

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.

Image

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');
Image


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.
Image

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)

Image


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

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.
 
spasticdonkey







PostPosted: Wed Sep 29, 2010 12:31 pm Reply with quote

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
 
mefoo







PostPosted: Wed Sep 29, 2010 12:39 pm Reply with quote

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)
 
spasticdonkey







PostPosted: Wed Sep 29, 2010 1:20 pm Reply with quote

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
 
mefoo







PostPosted: Wed Sep 29, 2010 1:28 pm Reply with quote

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.
 
killing-hours
RavenNuke(tm) Development Team



Joined: Oct 01, 2010
Posts: 438
Location: Houston, Tx

PostPosted: Mon Oct 04, 2010 3:37 pm Reply with quote

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.

_________________
Money is the measurement of time - Me
"You can all go to hell…I’m going to Texas" -Davy Crockett 
View user's profile Send private message
spasticdonkey







PostPosted: Mon Oct 04, 2010 4:18 pm Reply with quote

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

[ Only registered users can see links on this board! Get registered or login! ]

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.
 
killing-hours







PostPosted: Mon Oct 04, 2010 6:23 pm Reply with quote

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
 
killing-hours







PostPosted: Mon Oct 04, 2010 7:43 pm Reply with quote

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.
 
killing-hours







PostPosted: Tue Oct 05, 2010 8:44 am Reply with quote

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.
 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> JavaScript

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©