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

Official TigerDirect.com Coupons

Official TigerDirect.com Coupons

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

Computers-and-Technology Articles from EzineArticles.com