表单提交按钮在谷歌浏览器中不起作用（jQuery Validate） [英] Form submit button not working in Google Chrome (jQuery Validate)

问题描述

我在我的演示页面上使用了jQuery Validate插件，出于某种原因，提交按钮在Google Chrome中无法使用。我怀疑它与自动填充功能有关，但我不确定：

现在一直在为这个问题挣扎几天。

以下是链接：联系表

以下是jQuery代码片段。文件中使用的所有js可以在以下位置找到：合并js代码 - 初始化程序代码位于底部。

  $（function（）{
 / * -----验证----- * / 
 $（＃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 
}，
证言：{
 required：true ，
 minlength：5 
}，
 security_cod e：required
}，
 
 submitHandler：function（form）{
 form.submit（）; 
返回false; 
}，
 
消息：{
 email：< span class ='errors'>请输入有效的电子邮件地址< / span>，
名称：{
 required：< span class ='errors'>请输入您的名字< / span> 
}，
 last：{
 required：< span class ='errors'>请输入您的姓氏< / span> 
}，
电话：{
 required：< span class ='errors'>请输入您的电话号码< / span>，
 phoneUS：< span class ='errors'>请输入一个有效的电话号码< / span>，
 minlength：< span class ='errors'>电话号码太短< / span>，
 maxlength：< span class ='errors'>电话号码太长< / span> 
}，
 city：< span class ='errors'>请输入您的城市< / span>，
 state：< span class ='errors'>请选择您的州< / span>，
 zip：{
 required：< span class ='errors'>请输入您的邮政编码< / span>，
 minlength ：< span class ='errors'>邮编必须超过4个字符< / span>，
 maxlength：< span class ='errors'>邮编必须小于11字符< /跨度>中
}，
证言：{
 required：< span class ='errors'>请输入您的证词< / span>，
 minlength：< span class ='errors'>证言必须超过5个字符< / span> 
}，
 security_code：< span class ='errors'>此字段必填< / span> 
}，
 
 errorPlacement：function（error，element）{
 if（element.attr（'id'）！='security_code_input'）{
 error。 insertAfter（元件）; 
} else {
 error.insertAfter（$（'＃sec_code_msg'））; 
} 
} 
}）; 
 
 $ b / * -----输入屏蔽----- * / 
 $（＃phone）。mask（[phone] ）; 
  

}）;

解决方案

< input name =submittype =submitvalue =立即发送>


使用这一行，您已经重写了表单的submit函数并用按钮替换了它。 p>

form.submit =此按钮。不是一个事件处理程序。

修正：将按钮命名为别的。

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("[phone]");

});

解决方案

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

这篇关于表单提交按钮在谷歌浏览器中不起作用（jQuery Validate）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！