0

我有一个表单，我正在使用 jQuery Validate 插件进行验证。我还有一个自定义构建的密码强度验证脚本。

我已将提交处理程序设置为调用密码验证函数（validatePwdValid），如果密码有效，我希望表单提交，但如果密码无效则不提交。我让它在 Chrome 中工作，但在 Firefox 中没有。因为它在 Chrome 中运行，我认为其中一个函数的参数列表中的“事件”导致了问题，但即使使用它，我也无法让它在 FireFox 中运行。

function validatePwdValid() {
    if (pwdValid == true) {
        form.submit();
    } else {
        e.preventDefault();
        $('.form-validate-password .alert-error').removeClass('hide');
    }
};

$(".form-validate-password").validate({
    submitHandler: function(e) {
        //this runs when the form validated successfully
        validatePwdValid();
    }
});

有任何想法吗？

添加更多代码以使其更清晰（但具有讽刺意味的是更复杂）。

$(function(){
    var pwdInput = $('.form-validate-password #input-password');
    var pwdValid = false;

    // Function to ensure password conforms to strength requirements
    function validatePwdStrength() {
        var pwdValue = $(this).val();
        pwdValid = false; // Start out false;

        if (pwdValue.length > 7) {
            $('#length').removeClass('invalid').addClass('valid');
            pwdValid = true;
        } else {
            $('#length').removeClass('valid').addClass('invalid');
        }

        // There are many rules here there are ommitted about uppercase, numbers etc.
    }

    // Function to check that pwdValid is true, and if so submit the form, otherwise don't.
    function validatePwdValid() {
        if (pwdValid == true) {
            form.submit();
        } else {
            event.preventDefault();
            $('.form-validate-password .alert-error').removeClass('hide');
        }
    }

    // When the user enters the password, run validatePwdStrength
    pwdInput.bind('change keyup input', validatePwdStrength);

    $(".form-validate-password").validate({
        submitHandler: function(e) {
            //this runs when the form validated successfully
            validatePwdValid();
        }
    });
});

这里有一个小提琴：

验证小提琴

如果您输入少于 8 个字符的密码并提交，您会在 Chrome 中看到错误消息，但在 Firefox 中不会。Firefox 仍将提交表单。

4

2 回答 2

0

你的脚本有几个问题。

1. 在您的回调validatePwdValid()之外定义。submitHandler函数具有“范围”，它本质上决定了它们可以访问哪些变量。函数的范围由定义函数的位置确定（除非使用称为.call()... 的特殊实用程序方法，但这对于快速回答来说太过分了）。

回调内部scope与定义submitHandler()的范围不同validatePwdValid()。因此，validatePwdValid()不知道'e'是什么。此外，您没有在任何地方定义 pwdValid ......它undefined......undefined == true总是评估为假......所以 form.submit() 永远不会被调用。

于 2013-07-16T02:10:25.807 回答
0

自从我使用 validate 插件以来已经有一段时间了，但假设在提交表单时运行验证， e.preventDefault() 将阻止表单提交。因此，只需将“e”传递给将停止提交的函数。

这是一个没有验证插件的快速示例：

function validatePwdValid(e) {
    //define pwdValid somewhere
    var pwdValid;

    if (!pwdValid) {
        e.preventDefault();
        alert('event stopped');
    }
    //if pwdValid submits
};

$("#form").on('submit', function(e){
    //validate form
    validatePwdValid(e);
});

http://jsfiddle.net/GP5xz/

编辑：

这是更新的示例。Firefox 没有全局事件对象，所以必须传入。

// Function to check that pwdValid is true, and if so submit the form, otherwise don't.
function validatePwdValid(form, event) {
    if (pwdValid == true) {
        form.submit();
    } else {
        alert('prevent submit');
        event.preventDefault();
        $('.form-validate-password .alert-error').removeClass('hide');
    }
}

// When the user enters the password, run validatePwdStrength
pwdInput.bind('change keyup input', validatePwdStrength);

$(".form-validate-password").validate({
    submitHandler: function(form, event) {
        //this runs when the form validated successfully
        validatePwdValid(form, event);
    }
});

测试在 Firefox 中工作。 http://jsfiddle.net/tUepU/1/

于 2013-07-16T02:38:54.373 回答