Question

我有一个表单，我正在使用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();
        }
    });
});

这里有一个小提琴：

validation fiddle

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

Answer 1

你的剧本有几个问题。

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

scope回调中的submitHandler()与定义validatePwdValid()的范围不同。因此，validatePwdValid()不知道'e'是什么。此外，你没有在任何地方定义pwdValid ......它的undefined ... undefined == true总是计算为false ...所以form.submit（）永远不会被调用。

Answer 2

自从我使用了validate插件以来，已经过了一段时间，但假设在提交表单时运行验证，e.preventDefault（）将停止提交表单。所以只需将'e'传递给将停止提交的功能。

这是一个快速示例sans validate plugin：

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/

阻止在jQuery Validation插件中的“提交处理程序”的单独函数中提交

2 个答案: