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

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

Answer 2

您将点击事件绑定到验证功能内的按钮，这就是它需要2次点击的原因首先单击绑定点击事件，然后第二次单击触发其中的代码。从代码中删除点击事件。

jQuery：Button只需点击两次即可提交表单

2 个答案: