我有一个表单验证脚本，它应该在单击提交按钮时触发。一切都很好，除了有时它需要在提交之前单击两次提交按钮。事实上，只有大约 20% 的时间会发生，这使得诊断变得非常困难。#send 按钮不是动态的，所以我不确定问题可能是什么。任何帮助，将不胜感激！这将在移动表单上使用，因此任何其他改进的想法也会很棒。谢谢！
$(document).ready(function(){
var jVal = {
'location' : function() {
var element = $('#location');
var errorMsg = $('#LocationError');
if(element.val()==0) {
jVal.errors = true;
errorMsg.slideDown('fast');
element.addClass('wrong');
} else {
errorMsg.slideUp('fast');
element.removeClass('wrong');
}
},
'firstName' : function() {
var element = $('#firstname');
var errorMsg = $('#nameInfo');
if(element.val().length < 1) {
jVal.errors = true;
errorMsg.slideDown('fast');
element.addClass('wrong');
} else {
errorMsg.slideUp('fast');
element.removeClass('wrong');
}
},
'lastName' : function() {
var element = $('#lastname');
var errorMsg = $('#LastNameInfo');
if(element.val().length < 1) {
jVal.errors = true;
errorMsg.slideDown('fast');
element.addClass('wrong');
} else {
errorMsg.slideUp('fast');
element.removeClass('wrong');
}
},
'email' : function() {
var element = $('#email');
var errorMsg = $('#EmailError');
var patt = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(element.val().length < 1) {
jVal.errors = true;
errorMsg.html('Email is required.').slideDown('fast');
element.addClass('wrong');
} else if (!patt.test(element.val())) {
jVal.errors = true;
errorMsg.html('Please enter a valid email address.').slideDown('fast');
element.addClass('wrong');
} else {
errorMsg.slideUp('fast');
element.removeClass('wrong');
}
},
'telephone' : function() {
var element = $('#telephone');
var errorMsg = $('#TelephoneInfo');
var patt = /^(?:\+?1[-. ]?)?(\(\d{3}\)|\d{3})-?\d{3}-?\d{4}$/;
if(element.val().length < 1) {
jVal.errors = true;
errorMsg.html('Telephone is required.').slideDown('fast');
element.addClass('wrong');
} else if (!patt.test(element.val())) {
jVal.errors = true;
errorMsg.html('Please enter a valid telephone number.').slideDown('fast');
element.addClass('wrong');
} else {
errorMsg.slideUp('fast');
element.removeClass('wrong');
}
},
'sendIt' : function (){
var element = $('#send'),
submissionInfo = '<div id="SubmissionInfo" class=""></div>',
successMSG = '<strong>Thank you for contacting us!</strong><br>An Ideal Image consultant will contact you soon!</i>',
sending = '<i class="icon-spinner icon-spin icon-2x" style="color:#5383b4;"></i>',
errors = $('.error');
if($("#SubmissionInfo").length==0) {
$(element).before(submissionInfo);
}
submissionInfo = $('#SubmissionInfo');
if(!jVal.errors) {
//form.submit();
var form = $('#myform'),
trackingURL = window.location.pathname+'thankyou.php';
submissionInfo.html(sending).fadeIn('fast');
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(){
form.get(0).reset();
submissionInfo.html(successMSG).addClass('success');
_gaq.push(['_trackPageview',trackingURL]);
jVal.firePixel();
}
});
} else {
errors.animate({marginLeft:'+='+5},150,function(){$(this).animate({marginLeft:'-='+5},150);});
}
},
'firePixel' : function() {
//Chango
var __chconv__ = {"conversion_id":14};
(function() {
if (typeof(__chconv__) == "undefined") return;
var e = encodeURIComponent; var p = [];
for(var i in __chconv__){p.push(e(i) + "=" + e(__chconv__[i]))}
(new Image()).src = document.location.protocol + '//as.chango.com/conv/i;' + (new Date()).getTime() + '?' + p.join("&");
})();
//VWO
if(typeof(_vis_opt_top_initialize) == "function") {
// Code for Custom Goal: Goal #2
_vis_opt_goal_conversion(200);
// uncomment the following line to introduce a half second pause to ensure goal always registers with the server
_vis_opt_pause(500);
}
}
};
// ====================================================== //
// Validation
$('#send').on('click', function (){
jVal.errors = false;
jVal.location();
jVal.firstName();
jVal.lastName();
jVal.telephone();
jVal.email();
jVal.sendIt();
return false;
});
$('#location').change(jVal.location);
$('#firstname').change(jVal.firstName);
$('#lastname').change(jVal.lastName);
$('#email').change(jVal.email);
$('#telephone').change(jVal.telephone);
});
编辑：我想我知道这是我的按钮样式。如果我单击按钮的顶部 2px，则单击不会触发。知道如何解决这个问题吗？
.button {
position: relative;
top: -2px;
display: inline-block;
padding: 0 .75em 0 .75em;
margin: 4px 0;
height: 3.25em;
background: #e45c5e;
border: none;
-webkit-box-shadow: #9f4042 0 4px 0 0;
-moz-box-shadow: #9f4042 0 4px 0 0;
box-shadow: #9f4042 0 4px 0 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
color: #fff;
font-size: 14px;
line-height: 3.25;
text-transform: uppercase;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
cursor: pointer;
font-weight: normal;
outline: 0;
}
.button:hover, .button:focus {
background-color: #f16d6f;
}
.button:active {
top: 0;
background-color: #f16d6f;
-webkit-box-shadow: #9f4042 0 2px 0 0;
-moz-box-shadow: #9f4042 0 2px 0 0;
box-shadow: #9f4042 0 2px 0 0;
}