safari表单验证只在第二个按钮点击,但在IE第一次点击本身工作良好

safari form validation works only in second button click, but works fine in IE 1st click itself

本文关键字:第一次 IE 工作 但在 第二个 按钮 safari 表单 验证      更新时间:2023-09-26

我使用下面的jquery进行表单验证,下面的代码在IE9中工作得很好,但在safari中有时它只在第二次点击按钮时工作。

例如

我正在输入正确的电子邮件和错误的密码,它显示错误消息,然后我更正密码并单击按钮,错误被删除,但表单没有提交,然后我再次单击按钮,它正在提交。这只发生在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个模糊函数和重写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');
            }
        })($);

            });

使用

$( document ).ready(function() {
不是

jQuery().ready(function domReady($) {