Form submit button not working in Google Chrome (j

2019-02-20 22:07发布

问题:

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");

});

回答1:

<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.



回答2:

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