Top 10 Daily Top Selling Deals - Official TigerDirect.com Deals

Error loading feed.

Official TigerDirect.com Coupons

Error loading feed.

Official TigerDirect.com Coupons

Error loading feed.

Tuesday, March 1, 2011

Form won't submit after new method added to jquery validate plugin


Okay, I was able to fix the problem I was having in my last thread: http://www.webdevforums.com/showthre...-for-duplicate and really didn't want to start a new thread, but couldn't find a way to edit the title.

I am now having a new problem. My form won't submit. I submits fine when I remove the added method, but then my form won't check for duplicate emails and usernames. Any ideas why this might be? Let me know if any more information would help.

I was able to get around the remote problem by adding the following method to the validator:

Code:


jQuery.validator.addMethod("duplicate", function(value, element, params) {
        var validator = this;
        params.data[element.name] = value;
        $.post(params.url, params.data, function(response) {
                if (response == 'true'){
                        var errors = {};
                        validator.showErrors(errors);
                        return true;
                }else {
                        var errors = {};
                        errors[element.name] =  response;
                        validator.showErrors(errors);
                        return false;
                }
        }, 'text');
}, '');

Then, I implemented the validation like this:

Code:


        $("#sign_up").validate({
                rules: {
                        onfocusout: true,
                        username: {
                                required: true,
                                equals: "username",
                                minlength: 5,
                                duplicate: {
                                        url: "checkuname.php",
                                        data: {username: $("#req-name").val()}
                                }
                        },
                        email: {
                                required: true,
                                email: true,
                                equals: "email",
                                duplicate: {
                                        url: "checkemail.php",
                                        data: {email: $("#req-email").val()}
                                }
                        },
                        pass1: {
                                minlength: 5,
                                required: true,
                                equals: "password"
                        },
                        pass2: {
                                equalTo: "#req-password",
                                equals: "password"
                        }
                },
                messages: {
                        username: {
                                required: "Please include a username<br>",
                                minlength: "Please enter a username with more than 5 characters<br>",
                                equals: "Please enter a username<br>"
                        },
                        email: {
                                required: "Please enter an email address<br>",
                                email: "The email address you entered was not valid, please try again<br>",
                                equals: "Please enter an email address<br>"
                        },
                        pass1: {
                                minlength: "Please enter a password that is longer than 5 characters<br>",
                                required: "Please enter a password<br>",
                                equals: "Please enter a password<br>"
                        },
                        pass2: {
                                equalTo: "Both your passwords did not match.  Please try again<br>",
                                equals: "Please enter a password<br>"
                        }
                },
                errorLabelContainer: "#messageBox",
                submitHandler: function(form) {       
                        $(form).ajaxSubmit({
                                success: function(){
                                        $("#signup_content").fadeOut('slow', function(){
                                                // animation done
                                        });
                                }
                        });
                }
        });

No comments:

Post a Comment