0

jQuery Validate プラグインを使用して検証するフォームがあります。また、パスワードの強度を確認するカスタム ビルドの検証スクリプトもあります。

パスワード検証関数 (validatePwdValid) を呼び出すように送信ハンドラーを設定しました。パスワードが有効な場合はフォームを送信し、パスワードが無効な場合は送信しません。Chrome では動作しますが、Firefox では動作しません。Chromeで動作しているので、関数の1つのパラメーターリストの「イベント」が問題を引き起こしていると思いますが、それでも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

検証プラグインを使用してからしばらく経ちましたが、フォームの送信時に検証が実行されると仮定すると、 e.preventDefault() はフォームの送信を停止します。したがって、送信を停止する関数に「e」を渡すだけです。

sans validate プラグインの簡単な例を次に示します。

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 に答える