Getting cannot call method of undefined using JQuery Form Validator

Question

I'm using the Jquery form validator (http://formvalidator.net/) and I'm having trouble validating SELECT boxes. I've searched the above site and found NOTHING. I have found this article on StackOverflow. (jQuery select box validation)

But it doesn't work.... I get "cannot call method of undefined".

$(document).ready(function() {

    //First validate the form
        $.validate({
            addValidClassOnAll: true,
            rules: {
                states: {
                    requiredState: true
                },
                color: {

                    requiredColor: true
                },
                size: {

                    requiredSize: true
                }
            },
            onError: function() {
                console.log('Form Validation failed');
                return false;
            },
            onSuccess: function() {
                console.log('Form is valid!');
                return true; //Return False Will stop the submission of the form
            }
        });

        $.validator.addMethod('requiredState', function(value) {
            return (value !== 'XX');
        }, "State required");
        $.validator.addMethod('requiredColor', function(value) {
            return (value !== 'select');
        }, "Please select a Color");    
        $.validator.addMethod('requiredSize', function(value) {
            return (value !== 'select');
        }, "Please select a Size");    

    });

Using the js file: jquery.form-validator.js, there's no need to preface the $.validate... with the form name. But if I do, the validator doesn't work.

But if I don't, the addMethod() doesn't work... So I'm stuck between a rock and a hard place.

Any suggestions would be helpful.

Thank you, all.

Peter

UPDATE: Here's the watered down HTML

<!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width" />
            <meta name="keywords" content="jquery, plugin, scratchpad, scratchcard, scratch" />
            <meta name="description" content="A jQuery plugin to mimic a scratch card or pad behaviour.  Allowing you to scratch off an overlay as either a color or image." />


            <title>MyTitle for Testing</title>

            <!-- CSS -->
            <link rel="Stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
            <link rel="Stylesheet" type="text/css" href="css/bootstrap-form.css" />


        </head>
        <body>

            <div id="content3">


                    <div id="content-new" class="contentShipping">

                        <form id="formNewShip" class="bootstrap-frm" action="someFormProcessor.php" method="post">
                            <h1 style="float: left;">Enter your shipping address</h1>
                            <div style="float: left; width: 255px;">
                                <label style="vertical-align: middle;display:none;">First Name:&nbsp;</label>
                                <input type="text" id="fname" name="fname" size="25" maxlength="20" 
                                       placeholder="First Name"  data-validation="alphanumeric" />
                                <br>
                            </div>
                            <div style="float: right; width: 255px;">
                                <label style="vertical-align: middle;display:none;">Last Name:&nbsp;</label>
                                <input type="text" id="lname" name="lname"  size="35" maxlength="35" 
                                       placeholder="Last Name" data-validation="alphanumeric" />
                                <br>
                            </div>
                            <br>
                            <div style="float: left; width: 262px;">
                                <label style="vertical-align: middle;display:none;">Address:&nbsp;</label>
                                <input type="text" id="address" name="address" size="30" maxlength="45" 
                                       placeholder="Address" data-validation="alphanumeric" />
                                <br>
                            </div>
                            <div style="float: left; width: 255px;">
                                <label style="vertical-align: middle;display:none;">Apt/Ste:&nbsp;</label>
                                <input type="text" id="aptste" name="aptste" size="15" maxlength="10" 
                                       placeholder="Apt/Ste" />
                                <br>
                            </div>
                            <div style="float: left; width: 262px;">
                                <label style="vertical-align: middle;display:none;">City:&nbsp;</label>
                                <input type="text" id="city" name="city" size="30" maxlength="45" 
                                       placeholder="City" data-validation="alphanumeric" />
                                <br>
                            </div>
                            <div style="float: right; width: 255px;">
                                <label style="vertical-align: middle;display:none;">State:&nbsp;</label>
                                <select id="states" name="states" title='Select your state.'>
                                    <option value="XX" selected="selected">State</option>
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="DC">District Of Columbia</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                                <br>
                            </div>
                            <div style="float: left; width: 262px;">
                                <label style="vertical-align: middle;display:none;">Zip Code:&nbsp;</label>
                                <input type="text" id="zipcode" name="zipcode" size="30" 
                                       maxlength="5" placeholder="Zip Code"
                                       data-validation="USAZipCode" />
                                <br>
                            </div> 
                            <div style="float: right; width: 255px;">
                                <label style="vertical-align: middle;display:none;">Size:&nbsp;</label>
                                <select id="size" name="size" title='Select your size.'>
                                    <option value="select" selected="selected">Size</option>
                                    <option value="small">Small</option>
                                    <option value="medium">Medium</option>
                                    <option value="large">Large</option>
                                </select>
                            </div>
                            <div style="float: left; width: 262px;">
                                <label style="vertical-align: middle;display:none;">Color:&nbsp;</label>
                                <select id="color" name="color" title='Select your color.'>
                                    <option value="select" selected="selected">Color</option>
                                    <option value="red">Red</option>
                                    <option value="blue">Blue</option>
                                </select>                            
                            </div>
                            <div style="float: right; width: 255px;">
                                <label style="vertical-align: middle;display:none;">Email:&nbsp;</label>
                                <input type="text" id="email" name="email"  size="30" maxlength="100" 
                                       placeholder="Email" data-validation="email" />
                                <br>
                            </div>
                            <div id="buttons" style="width: 210px;">
                                <div><button id="btnSubmit" type="submit" class="btn btn-primary center-block">Submit</button></div>
                        <!--        <div style="float: right;"><button id="btnReset" type="reset" class="btn btn-primary">Reset</button></div>-->
                            </div>                
                        </form>
                    </div>                

                </div>

                <div id="templates"></div>

            <script type="text/javascript" src="assets/jquery.1.9.1.min.js"></script>
            <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
            <script type="text/javascript" src="js/jquery.form.js"></script>
            <script type="text/javascript" src="js/jquery_form_validator/jquery.form-validator.js"></script>


        </body>
    </html>

Can you add your html for full test on JSFIDDLE, please?

radia
– radia

2014-03-31 16:00:58 +00:00
Commented Mar 31, 2014 at 16:00 — radia
– radia, Commented Mar 31, 2014 at 16:00
Just did... Hope that helps

Peter The Angular Dude
– Peter The Angular Dude

2014-03-31 16:10:19 +00:00
Commented Mar 31, 2014 at 16:10 — Peter The Angular Dude
– Peter The Angular Dude, Commented Mar 31, 2014 at 16:10

radia · Accepted Answer · 2014-03-31 17:09:43Z

1

checkout this Fiddle it works, you have to declare your validation methods before rules declaration and use

$("#formNewShip").validate({})

Edit:

To require firstame, you should add this to your rules:

fname: {
         required: true
        },

edited Mar 31, 2014 at 17:09

answered Mar 31, 2014 at 16:33

radia

1,4961 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter The Angular Dude Over a year ago

Ok, that's cool, but the rest of the fields need to be validated too... so I just need to do an "add method" for all the fields, right?

radia Over a year ago

but you defined no validations for the other fields, that's normal. I edit to show an example, and checkout this example to have an idea jsfiddle.net/JWF7M

Starscream1984 · Accepted Answer · 2014-03-31 16:37:01Z

0

I made a fiddle and it works fine:

http://jsfiddle.net/BzRth/

I added the form selector and removed the onSuccess and onError handlers as they seemed superfluous, but the behaviour is exactly as I would expect.

Check that you're using the same version of the jquery validator code as my fiddle (CDN at http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js)

answered Mar 31, 2014 at 16:37

Starscream1984

3,0621 gold badge21 silver badges27 bronze badges

1 Comment

Peter The Angular Dude Over a year ago

OK, this works, but again, if I define the form like this: $("#formNewShip").validate({}); the other fields don't validate with the jquery.form-validator.js. Consequently, if I remove the form name, the drop downs don't validate... it's six of one and a half dozen of another....

Collectives™ on Stack Overflow

Getting cannot call method of undefined using JQuery Form Validator

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related