CODEWITHSUNDEEP
javascriptjquerygoogle-chromejquery-validateform-submit
Julian
Julian

Reputation: 1831

Form submit button not working in Google Chrome (jQuery Validate)

I'm using the jQuery Validate plugin on my demo page and for some reason the Submit button doesn't work in Google Chrome. I suspect it has to do with the Autofill feature but I'm not sure:

Been struggling with this issue one and off for a few days now.

Here's the link: Contact Form

Here's a snippet of the jQuery Code. All the js used in the file can be found in: combined js code - The initializer code is at the bottom.

$(function(){
/* ----- Validation ----- */
$("#contactform").validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        name: "required",
        last: "required",
        phone: {
            required: true,
            phoneUS: true,
            minlength: 10,
            maxlength: 14
        },
        city: "required",
        state: "required",
        zip: {
            required: true,
            minlength: 5,
            maxlength: 10
        },
        testimonial: {
            required: true,
            minlength: 5
        },
        security_code: "required"
    },

    submitHandler: function(form) {
        form.submit();
        return false;
    },

    messages: {
        email: "<span class='errors'>Please enter a valid email address</span>",
        name: {
            required: "<span class='errors'>Please enter your first name</span>"
        },
        last: {
            required: "<span class='errors'>Please enter your last name</span>"
        },
        phone: {
            required: "<span class='errors'>Please enter your phone number</span>",
            phoneUS: "<span class='errors'>Please enter a valid phone number</span>",
            minlength: "<span class='errors'>Phone number too short</span>",
            maxlength: "<span class='errors'>Phone number too long</span>"
        },
        city: "<span class='errors'>Please enter your city</span>",
        state: "<span class='errors'>Please choose your state</span>",
        zip: {
            required: "<span class='errors'>Please enter your zip code</span>",
            minlength: "<span class='errors'>Zip Code must be more than 4 characters</span>",
            maxlength: "<span class='errors'>Zip Code must be less than 11 characters</span>"
        },
        testimonial: {
            required: "<span class='errors'>Please enter your testimonial</span>",
            minlength: "<span class='errors'>Testimonial must be more than 5 characters</span>"
        },
        security_code: "<span class='errors'>This field is required</span>"
    },

    errorPlacement: function(error, element) {
        if (element.attr('id') != 'security_code_input') {
            error.insertAfter(element);
        } else {
            error.insertAfter($('#sec_code_msg'));
        }
    }
});


/* ----- Input Masking ----- */
$("#phone").mask("(999) 999-9999");

});

Upvotes: 1

Views: 8329

Answers (2)

James
James

Reputation: 22237

<input name="submit" type="submit" value="Send Now">

With this line you have overridden the form's "submit" function and replaced it with a button.

form.submit = this button. Not an event handler.

Fix: name the button something else.

Upvotes: 3

loxxy
loxxy

Reputation: 13151

I doubt the form action has a problem....??

<form action="/contact_form_10-6-2011/contact.php#contactformWrapper" method="post" name="form1" id="contactform">

Dun know why, but I found it bugging me.

Are you using the same php file to read & parse the input as well??something like, Using PHP_SELF in the action field of a form

Upvotes: 0

Related Questions