Question

我有这个脚本：

var pUserName = $('#UserName'), pPassword = $('#Password'), pRememberMe = $('#RememberMe');

$(function () {
    Initialize();

    $('#logon button').click(function () {
        $.event.trigger('AjaxButtonClick', this);
        $.event.trigger('AjaxLoader', '#logon .form');
        $('form#logon').valid();
    });
});

function Initialize() {
    returnUrl = getParameterByName('ReturnUrl');

    $('form#logon').validate({
        submitHandler: function (form) {
            logOn(returnUrl);
        },
        invalidHandler: function (e, validator) {
            showAnimatedStatusText($('.message'), 'Please fill in the required fields highlighted below.', 'warning');
            $.event.trigger('AjaxButtonError');
            $.event.trigger('AjaxLoader');
        },
        errorPlacement: function (error, element) {
            return true;
        },
        highlight: function (element) {
            $(element).parent().addClass("input-validation-error");
        },
        unhighlight: function (element) {
            $(element).parent().removeClass("input-validation-error");
        }
    });
};

function logOn(returnUrl) {
    $.ajax({
        url: '/_Account/LogOn',
        type: 'POST',
        data: '{ "UserName": "' + pUserName.val() + '", "Password": "' + pPassword.val() + '", "RememberMe": ' + pRememberMe.is(':checked') + ', "returnUrl": "' + returnUrl + '" }',
        dataType: 'text json',
        contentType: 'application/json; charset=utf-8',
        success: function (o) {
            if (o.success) {
                // Success code

                $.event.trigger('AjaxButtonSuccess');
            } else {
                showAnimatedStatusText($('.message'), o.error, 'error');
                $.event.trigger('AjaxButtonError');
            }

            $.event.trigger('AjaxLoader');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            showAnimatedStatusText($('.message'), 'An uncaught error has occurred, please contact your system administrator (Error code: 150).', 'error');
            $.event.trigger('AjaxButtonError');
            $.event.trigger('AjaxLoader');
        }
    });
};

除了ie8之外，所有浏览器都能正常工作。由于某种原因，从不调用submitHandler。如果输入的数据不正确，则invalidHandler称为fine，但submitHandler永远不会。

有谁知道为什么？

干杯， / r3plica

Answer 1

问题在于，使用ie8中的元素似乎与即使您提供的元素的工作方式不同。为了实现这一点，我必须将验证脚本更改为：

    $('#logon').validate({
        submitHandler: function () {
            // Do not submit
        },
        invalidHandler: function (e, validator) {
            showAnimatedStatusText($('.message'), 'Please fill in the required fields highlighted below.', 'warning');
            $.event.trigger('AjaxButtonError');
            $.event.trigger('AjaxLoader');
        },
        errorPlacement: function (error, element) {
            return true;
        },
        highlight: function (element) {
            $(element).parent().addClass("input-validation-error");
        },
        unhighlight: function (element) {
            $(element).parent().removeClass("input-validation-error");
        }
    });

并且调用按钮单击如下所示：

    $('#logon button').click(function () {
        $.event.trigger('AjaxButtonClick', this);
        $.event.trigger('AjaxLoader', '#logon .form');
        if ($('#logon').valid()) {
            logOn(returnUrl);
        };
    });

这样做可以解决这个问题。

jquery验证ie8 submitHandler没有解雇

1 个答案: