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

только предотвратить представить поведение, когда это необходимо.

Answer 2

Вы привязываете событие click к кнопке внутри функции проверки, поэтому для этого требуется 2 клика. Первый клик привязывает событие клика, а затем второй код запускает внутри него код. Удалить из контекстного клика событие из кода.