我使用下面的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');
}
}
);
});
答案 0 :(得分:2)
我自己发现了问题,这是因为同一文本框的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');
}
})($);
});
答案 1 :(得分:0)
使用
$( document ).ready(function() {
而不是
jQuery().ready(function domReady($) {
并将所有事件写在文档准备之外。