Jquery validate doing nothing at all?

Question

I've been playing with Jquery Validate for a couple of days now and i just cant seem to get it to actually validate anything. The idea is that I have a form that does its CRUD operations via AJAX but before I allow the AJAX operations I want to trigger validation and only allow data to be sent if everything is OK. But for some reason data is being sent whether it is valid or not, not getting any firebug errors or anything to indicate the problem.

Heres my code (in a separate file but with Jquery and validate files included before it ) :

Rules and messages :

var rules = {

id: {required: true,number: true,minlength: 9,maxlength: 9},
forename: {required: true,maxlength: 255},
surname: {required: true,maxlength: 255},    
addr1: {required: true,maxlength: 255},
addr2: {required: true,maxlength: 255},
addr3: {required: true,maxlength: 255},    
addr4: {required: true,maxlength: 255},
postcode: {required: true,postUK: true},    
pemail: {required: true,email:true},
wemail: {required: true,email:true},
hphone: {required: true, phoneUK: true},
wphone:{required:true,phoneUK:true},    
mphone: {required: true,phoneUK: true}};

var messages = {
id: {
    required: 'The student id field cannot be empty ',
    number: 'The id must consist of whole numbers only ',
    minlength: $.validator.format("Your id length of {0} is not right must be at least 9"),
    maxlength: $.validator.format("Your id length of {0} is not right must be no more than 9")
},

forename: {
    required: 'The forename cannot be empty',
    maxlength: 'The forename cannot be more than 255 charters'   
},

surname: {
    required: 'The surname field cannot be empty',
    maxlength: 'The forename cannot be more than 255 charters'     
},

addr1: {
    required: 'The address 1 field cannot be empty',
    maxlength: 'The address 1 cannot be more than 255 charters' 
},

addr2: {
    required: 'address 2 field cannot be empty',
    maxlength: 'address 2 cannot be more than 255 charters' 
},

addr3: {
    required: 'address 3 field cannot be empty',
    maxlength: 'address 3 cannot be more than 255 charters' 
},

addr4: {
    required: 'address 4 field cannot be empty',
    maxlength: 'address 4 cannot be more than 255 charters' 
},

postcode: {
    required: 'The post code field cannot be empty',
    postUK: 'The provided post code is not in the correct format'  
},

wemail: {
    required:' work email field cannot be empty',
    email:'The work email address provided is not a valid email address '
},

pemail: {
    required: 'personal email field cannot be empty',
    email: 'The personal email address provided is not a valid email address'
},

hphone: {
    required: 'home phone number field cannot be empty',
    phoneUK: 'The home phone number provided is not valid'
},

mphone: {
    required: 'mobile phone number field cannot be empty',
    phoneUK: 'The mobile phone number provided is not valid'
},

wphone: {
    required: 'work phone number field cannot be empty',
    phoneUK: 'The home phone number provided is not valid'
}};

Validate set up:(jut added a couple of methods to check for valid UK phone and post)

jQuery.validator.addMethod('phoneUK', function(value, element) { 
    return this.value.length > 9 &&
    value.match(/^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9]{3,4}){3}$/);
});

jQuery.validator.addMethod('postUK', function(value, element) { 
    var regex =  /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i;
    return regex.test(value);
});

The actual validation:

     $('#detailsForm').validate({
        rules: rules,
        messages: messages,
        highlight: function(element) {
            $(element).addClass('errorInput');
        },
        unhighlight: function (element) {
            $(element).removeClass('errorInput');
        }
    });

     var valid = $('#detailsForm').valid();  // echo of this always seems to return true ??   

 if (!valid ) {
        alert ("The data you have inputted contains errors which have been highlighted ");
        return;
    }

    else { // do Ajax request this seems to be triggered no matter how I try to validate.

Sorry its a long one but can anyone help?

Thanks in advance

Update: The page HTML as requested:

                    <form type ="text" id ="detailsForm"   >

                        <div id ="row1" class="row" >
                            <label for='id'> ID: 
                                <br/>
                <input id ="id" name ="id" class="standardInput" />
                            </label>

                            <label for='forename'> Forename:
                                <br/>
                                <input type ="text" id="forename" name="forename" class="standardInput"/> 
                            </label>


                            <label for='surname' > Surname:
                                <br/>
                                <input type ="text" id ="surname" name ="surname" class="standardInput"/>
                            </label>

                            <label for ="modeID"> Mode ID:
                                <br/>
                                <select id ="modeID" name ="modeID" class="standardInput">
                                    <option value ="123">123</option>
                                    <option value ="153">153</option>
                                    <option value ="44">44</option>
                                </select>
                            </label>

                            <label for ="routeID"> Route ID: 
                                <br/>
                                <select id ="routeID" name ="routeID" class="standardInput">
                                    <option value ="g12">g12</option>
                                    <option value ="g13">g13 2</option>
                                    <option value ="H1">H1</option>
                                </select>
                            </label>
                        </div>

                        <div id ="row2"> 
                            <label for ="addr1"> Address Line 1:
                                <br/>
                                <input type ="text" id="addr1" name ="addr1" class="standardInput"/> 
                            </label>  

                            <label for ="addr2"> Address Line 2:
                                <br/>
                                <input type ="text" id="addr2" name ="addr2" class="standardInput"/> 
                            </label> 

                            <label for ="addr3"> Address Line 3:
                                <br/>
                                <input type ="text" id="addr3" name ="addr3" class="standardInput"/> 
                            </label> 

                            <label for ="addr4"> Address Line 4:
                                <br/>
                                <input type ="text" id="addr4" name ="addr4" class="standardInput"/>
                            </label>

                            <label for ="postcode"> Post code:
                                <br/>
                                <input type ="text" id="postcode" name ="postcode" class="standardInput"/>
                            </label>
                        </div>

                        <div id ="row3" class ="row">

                            <label for ="pemail"> Personal email:
                                <br/>
                                <input type ="text" id="pemail" name="pemail" class="standardInput"/>
                            </label>

                            <label for ="wemail"> Work email:
                                <br/>
                                <input type ="text" id="wemail" name ="wemail" class="standardInput"/>
                            </label>

                            <label for ="wphone"> Work phone No.:
                                <br/>
                                <input type ="text" id="wphone" name ="wphone" class="standardInput"/>
                            </label>

                            <label for ="hphone"> Home phone No.:
                                <br/>
                                <input type ="text" id="hphone" name ="hphone" class="standardInput"/>
                            </label>

                            <label for ="mphone"> Mobile phone No.:
                                <br/>
                                <input type ="text" id="mphone" name ="mphone" class="standardInput"/>
                            </label>
                        </div>
                    </form>
                </div>

Update 2:

Ok just realised That validate uses names not ids so I have added names that are exactly the same as the ids to all fields but still the same results i.e. validate returns true even if invalid data is input?

@user1555360 : Or can you please create a fiddle for this? Then its become easy to debug.. — Mahesh KP
– Mahesh KP, Commented Aug 2, 2012 at 6:11

user1555360 · Accepted Answer · 2012-08-02 10:44:37Z

2

OK fixed it,

Placed the validate function in its own method (not really the fix but good practice any how) and then created a validator object and called its .form() method to validate the form and returned the boolean from that to each calling method see following:

function validateForm() {

var validator = $('#detailsForm').validate({
            rules: rules,
            messages: messages,
            highlight: function(element) {
                $(element).addClass('errorInput');
            },
            unhighlight: function (element) {
                $(element).removeClass('errorInput');
            }
        });

        var result = validator.form(); return result;}

And in the AJAX functions:

 var valid = validateForm(); 
        alert(valid);

        if (valid === false ) {
            alert ('The information that has been input during the addition contains errors that have been highlighted');
            return;
        } else {} // do AJAX request

Actually a pretty simple fix but hopefully may help someone in future.

answered Aug 2, 2012 at 10:44

user1555360

735 bronze badges

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

1 Comment

hello_earth Over a year ago

note that in case of jquery steps plugin using validation, one should pay attention to the fact that setting up of the steps wizard is done on the DIV object which is a child of the form, and validation itself should be done on the FORM object - otherwise validations are ignored

Collectives™ on Stack Overflow

Jquery validate doing nothing at all?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related