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

Question

我正在制作一个表单验证功能，如果没有空输入按钮需要点击两次才能正常工作。

这是我的功能:

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');

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

Answer 1

你的方法应该是:

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();
    });
}

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