苹果浏览器表单验证仅在第二次单击按钮时有效，但在IE 1次单击本身中可以正常工作
[英]safari form validation works only in second button click, but works fine in IE 1st click itself
问题描述
我正在使用下面的jquery进行表单验证，下面的代码在IE9中可以正常工作，但在safari中有时只能在第二次单击按钮时工作。
例如，
我输入了正确的电子邮件和错误的密码，它显示了错误消息，然后我更正了密码并单击了按钮，该错误已删除，但表单未提交，然后我再次单击该按钮，该按钮正在提交。 这仅在野生动物园中发生。 我正在使用Safari 5.1
以及我认为单个就绪功能就足够了，但是我正在使用2个就绪功能，在不影响现有功能的情况下应删除其中一个。
jQuery().ready(function domReady($) {
$('#txtLogin_Id').removeClass('outLineRed');
$('#txtPassword').removeClass('outLineRed');
$('#spnLoginErr').hide();
$('#txtLogin_Id').watermark("Email Address");
$('#txtPassword').watermark("Password");
if ($('#lblLoginErr').val() != '') {
$('#spnLoginErr').show();
$('#spnLoginErr').html($('#lblLoginErr').val());
$('#MsgSucc').attr("style", "background-color:White;!important;");
}
else {
$('#spnLoginErr').hide();
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
}
$('#txtLogin_Id').blur(function () {
if ($('#txtLogin_Id').val() == '') {
$('#txtLogin_Id').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Please enter email address.");
$('#MsgSucc').attr("style", "background-color:White;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#spnLoginErr').hide();
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
$('#txtLogin_Id').removeClass('outLineRed');
}
}
);
$('#txtPassword').blur(function () {
if ($('#txtPassword').val() == '') {
$('#txtPassword').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Password has to be more than 6 characters");
$('#MsgSucc').attr("style", "background-color:White;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#spnLoginErr').hide();
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
$('#txtPassword').removeClass('outLineRed');
}
}
);
$('#BtnLogin').click(function () {
if ($('#txtPassword').val() == '' && $('#txtLogin_Id').val() == '') {
$('#txtLogin_Id').addClass('outLineRed');
$('#txtPassword').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Please enter email address and password.");
$('#MsgSucc').attr("style", "background-color:White;!important;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
}
if ($('#txtLogin_Id').val() == '') {
$('#txtLogin_Id').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Please enter email address.");
$('#MsgSucc').attr("style", "background-color:White;!important;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#txtLogin_Id').removeClass('outLineRed');
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
}
if ($('#txtPassword').val() == '') {
$('#txtPassword').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Password has to be more than 6 characters");
$('#MsgSucc').attr("style", "background-color:White;!important;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#txtPassword').removeClass('outLineRed');
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
}
});
(function errorMsgBasedhighlight() {
if ($('#lblLoginErr').val() == 'Please enter a valid email address and password.') {
$('#txtPassword').addClass('outLineRed');
$('#txtLogin_Id').addClass('outLineRed');
}
else if ($('#lblLoginErr').val() == 'Please enter a valid email address.') {
$('#txtLogin_Id').addClass('outLineRed');
}
else if ($('#lblLoginErr').val() == 'Please enter a valid Password.') {
$('#txtPassword').addClass('outLineRed');
}
else {
$('#txtLogin_Id').removeClass('outLineRed');
$('#txtPassword').removeClass('outLineRed');
}
})($);
$('#txtLogin_Id').blur(function () {
if ($('#txtLogin_Id').val() == '') {
$('#txtLogin_Id').addClass('outLineRed');
return false;
}
else {
$('#lblLoginErr').hide();
$('#txtLogin_Id').removeClass('outLineRed');
}
}
);
$('#txtLogin_Id').blur(function () {
if ($('#txtPassword').val() == '') {
$('#txtPassword').addClass('outLineRed');
return false;
}
else {
$('#lblLoginErr').hide();
$('#txtPassword').removeClass('outLineRed');
}
}
);
});
2 个解决方案
解决方案1
2 已采纳 2014-08-04 09:22:31
我自己发现了问题，这是因为同一文本框具有2个模糊功能并重写了domReady
下面是代码
$(document).ready{function(){
$('#txtLogin_Id').removeClass('outLineRed');
$('#txtPassword').removeClass('outLineRed');
$('#spnLoginErr').hide();
$('#txtLogin_Id').watermark("Email Address");
$('#txtPassword').watermark("Password");
if ($('#lblLoginErr').val() != '') {
$('#spnLoginErr').show();
$('#spnLoginErr').html($('#lblLoginErr').val());
$('#MsgSucc').attr("style", "background-color:White;!important;");
}
else {
$('#spnLoginErr').hide();
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
}
$('#txtLogin_Id').blur(function () {
if ($('#txtLogin_Id').val() == '') {
$('#txtLogin_Id').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Please enter email address.");
$('#MsgSucc').attr("style", "background-color:White;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#spnLoginErr').hide();
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
$('#txtLogin_Id').removeClass('outLineRed');
}
}
);
$('#txtPassword').blur(function () {
if ($('#txtPassword').val() == '') {
$('#txtPassword').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Password has to be more than 6 characters");
$('#MsgSucc').attr("style", "background-color:White;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#spnLoginErr').hide();
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
$('#txtPassword').removeClass('outLineRed');
}
}
);
$('#BtnLogin').click(function () {
if ($('#txtPassword').val() == '' && $('#txtLogin_Id').val() == '') {
$('#txtLogin_Id').addClass('outLineRed');
$('#txtPassword').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Please enter email address and password.");
$('#MsgSucc').attr("style", "background-color:White;!important;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
}
if ($('#txtLogin_Id').val() == '') {
$('#txtLogin_Id').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Please enter email address.");
$('#MsgSucc').attr("style", "background-color:White;!important;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#txtLogin_Id').removeClass('outLineRed');
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
}
if ($('#txtPassword').val() == '') {
$('#txtPassword').addClass('outLineRed');
$('#spnLoginErr').show();
$('#spnLoginErr').html("Password has to be more than 6 characters");
$('#MsgSucc').attr("style", "background-color:White;!important;");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
}
else {
$('#txtPassword').removeClass('outLineRed');
$('#MsgSucc').attr("style", "background-color:#dfe5e6;");
}
});
(function errorMsgBasedhighlight() {
if ($('#lblLoginErr').val() == 'Please enter a valid email address and password.') {
$('#txtPassword').addClass('outLineRed');
$('#txtLogin_Id').addClass('outLineRed');
}
else if ($('#lblLoginErr').val() == 'Please enter a valid email address.') {
$('#txtLogin_Id').addClass('outLineRed');
}
else if ($('#lblLoginErr').val() == 'Please enter a valid Password.') {
$('#txtPassword').addClass('outLineRed');
}
else {
$('#txtLogin_Id').removeClass('outLineRed');
$('#txtPassword').removeClass('outLineRed');
}
})($);
});
解决方案2
0 2014-07-31 13:00:18
采用
$( document ).ready(function() {
代替
jQuery().ready(function domReady($) {
并准备好文档之外的所有事件。
第一次尝试时，链接点击事件未触发按钮点击事件（仅限IE）。 第二次单击即可工作。
[英]link click event not firing button click event on the first try (IE only). Works on second click.
jQuery仅在第二次单击时有效（但在localhost中可以正常工作……）
[英]jquery works on second click only (but works fine in localhost…)
按钮中的传单AngularFire2代码第一次点击有效1次二次点击有效2次三次点击有效3次
[英]Leaflet AngularFire2 code in button 1st click works 1 time 2nd click works 2 time 3nd click works 3 time
<a href=“..”>第一次点击不起作用，但在FF中第二次点击起作用，在IE中工作正常</a>
[英]<a href=“..”> doesn't work at first click but works at second click in FF, in IE works fine
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery zclip不适用于第一次点击
功能仅在第二次单击时有效，然后可以正常工作吗？
状态栏中的屏蔽链接仅在第一次单击之前有效
第一次尝试时，链接点击事件未触发按钮点击事件（仅限IE）。 第二次单击即可工作。
jQuery仅在第二次单击时有效（但在localhost中可以正常工作……）
按钮中的传单AngularFire2代码第一次点击有效1次二次点击有效2次三次点击有效3次
按钮仅在第二次单击后有效
重新加载后，按钮仅在第二次单击时起作用
<a href=“..”>第一次点击不起作用，但在FF中第二次点击起作用，在IE中工作正常</a>
Click事件仅在移动设备上第二次有效，但在台式机上很好
相关标签