Trying to sort out some js code...

Rate Topic:

gushort

Group: Members
Posts: 452
Joined: 05-January 11
LocationToronto

Posted 12 April 2012 - 07:42 PM (#1)

Trying to sort out some js code...

In my live form validation setup, the following js code is used to evaluate the validity of values entered into the form's fields:


$(function(){
    $("#name").validate({
        expression: "if (VAL.match(/^[a-zA-Z][a-zA-Z_ ]*$/) && VAL) return true; else return false;",
        message: "Please enter a valid name (REQUIRED)"
    });
    $("#email").validate({
        expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/) && VAL) return true; else return false;",
        message: "Check your email address (REQUIRED)"
    });
    $("#msg").validate({
        expression: "if (VAL.length > 1) return true; else return false;",
        message: "<p>A message is REQUIRED!</p>"
    });
});

I would like to know what the purpose of the outer "$(function() { });" declaration is. Is this what forces "validity" only if all three .validate() functions return TRUE?

If so, does the main function itself return a value of TRUE or FALSE (1/0)?

I want to use an "if () {};" statement to enable/disable the submit button, depending upon the return values of all three validations, and I just want the simplest method. I suppose I could just use "if (validate() && validate() && validate()) { .strip(disable) } else { .add(disable) }" format, but as I am still js challenged .... input is welcome

NeilHanlon

Group: Members
Posts: 884
Joined: 08-July 10
LocationRowley, Massachusetts
Expertise:HTML,CSS,PHP,Java,Graphics

Posted 12 April 2012 - 07:54 PM (#2)

Well - depending on how you want to do this - you'll probably want to stop the form from accidentally submitting:

$(form).submit(function(event){
    event.preventDefault();
    //do validation
    //if valid: this.submit();
});

Not sure if that helps. If you're talking about the jQuery validation plugin - this does it for you - and it simply won't allow the event to occur if the validation doesn't work. It essentially does an action and returns false - thus preventing any further execution of the script.

gushort

Group: Members
Posts: 452
Joined: 05-January 11
LocationToronto

Posted 12 April 2012 - 09:06 PM (#3)

Thanks for the suggestion, but what I want to do is show the "Submit" button in a disabled state (adding the .disabled class in Bootstrap2) until the user fills all required fields and passes validation.

It just provides an extra visual cue to the user, letting them know everything is good to proceed.

I know how to do it, but I am just beginning to learn js so would like to know about the above function syntax.

Daniel15

dan.cx

Group: Moderators
Posts: 3415
Joined: 17-April 10
LocationMelbourne, Australia
Expertise:HTML,CSS,PHP,Java,Javascript,Node.js,SQL

Posted 12 April 2012 - 10:44 PM (#4)

Are you using a jQuery plugin or is this something built-in? (I don't use jQuery much)

Quote

I would like to know what the purpose of the outer "$(function() { });" declaration is.

A function passed to jQuery's "$" will run when the page has fully loaded. It doesn't have anything to do with the validation itself

Daniel15! :D

Repeat after me: jQuery is not JavaScript. It is not the answer to every JavaScript-related question. When you have to write some JavaScript, do not instantly react with "Oh, I'll do that with jQuery!"

Spoiler

javascript:alert((''+[][[]])[!+[]+!+[]]+(![]+[])[+!+[]]+(''+!+[]/[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(''+!![])[+!+[]+!![]+!![]]+(![]+[])[!+[]+!+[]]+(+!+[])+(!+[]+!+[]+!+[]+!+[]+!+[]))

Kyek, on 16 November 2011 - 11:14 AM, said:

Daniel15 is ruining my life D:

markbrown4, on 12 October 2012 - 03:02 AM, said:

When i grow up I want to be a Daniel15.

NeilHanlon

Group: Members
Posts: 884
Joined: 08-July 10
LocationRowley, Massachusetts
Expertise:HTML,CSS,PHP,Java,Graphics

Posted 12 April 2012 - 10:55 PM (#5)

Daniel15, on 12 April 2012 - 10:44 PM, said:

Are you using a jQuery plugin or is this something built-in? (I don't use jQuery much)

A function passed to jQuery's "$" will run when the page has fully loaded. It doesn't have anything to do with the validation itself

I don't think that's expressly true. As I understand it, creating an anonymous function under the $(function(){}); syntax is basically extending jQuery (An extension).

Doing stuff onDocumentReady would be

$(document).ready(function(){
});

gushort

Group: Members
Posts: 452
Joined: 05-January 11
LocationToronto

Posted 13 April 2012 - 01:39 AM (#6)

It is from a modified (to work with Bootstrap2) jQuery live validate plugin, code taken from here (I replaced all instances of "jQuery" with "$", to make it consistent with other jQuery code).

From what I have read, I believe NeilHanlon's statement, about it not being a document.ready() equivalent.

Daniel15

dan.cx

Group: Moderators
Posts: 3415
Joined: 17-April 10
LocationMelbourne, Australia
Expertise:HTML,CSS,PHP,Java,Javascript,Node.js,SQL

Posted 13 April 2012 - 06:40 AM (#7)

See the callback section at http://api.jquery.com/jQuery/ - it says $(fn) is the same as $(document).ready(fn)

I'm on my phone so can't really look through long chunks of code... I'll try look through that validator code if I remember tomorrow.

Daniel15! :D

Spoiler

javascript:alert((''+[][[]])[!+[]+!+[]]+(![]+[])[+!+[]]+(''+!+[]/[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(''+!![])[+!+[]+!![]+!![]]+(![]+[])[!+[]+!+[]]+(+!+[])+(!+[]+!+[]+!+[]+!+[]+!+[]))

Kyek, on 16 November 2011 - 11:14 AM, said:

Daniel15 is ruining my life D:

markbrown4, on 12 October 2012 - 03:02 AM, said:

When i grow up I want to be a Daniel15.