safari表单验证仅在第二次按钮单击时起作用,但在IE第一次点击本身时工作正常

时间:2014-07-31 12:51:45

标签: javascript jquery safari

我使用下面的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 个答案:

答案 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($) {

并将所有事件写在文档准备之外。