javascript - jQuery:按钮仅在单击两次后提交表单

我正在执行表单验证功能，如果没有空输入，则该按钮需要单击两次才能正常工作。

这是我的功能：

function validate(root, animation, error) {
    $('.button').on('click', function(event) {
        event.preventDefault()

        var isEmpty    = false,
            root       = $(root),
            animation  = animation ? animation : 'animation animation-shake',
            error      = error ? error : 'error';

        root.find('form').find('.required').each(function() {
            if ($(this).val().length == 0) {
                isEmpty = true;
                root.addClass(animation);
                $('.required.error:first').focus();
                $(this).addClass(error).on('keydown', function() {
                    $(this).removeClass(error);
                    root.removeClass(animation);
                });
            }
        });

        if (isEmpty) return;
        $(this).unbind('click');
    });
}

调用该函数的代码：

validate('#login-box .box');

任何想法都很棒，也有关于如何缩短/改进代码的建议。

最佳答案

您的方法应为：

function validate(root, animation, error) {
    $('.button').on('click', function(event) {
        /* event.preventDefault();*/ //<< remove it
        var isEmpty    = false,
           /*...*/
        /*if (isEmpty) return;
          $(this).unbind('click');*/ //<< remove it

        // and set at handler bottom
        if (isEmpty) event.preventDefault();
    });
}

仅在需要时阻止提交行为。

关于javascript - jQuery:按钮仅在单击两次后提交表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39752419/