jQuery：ボタンが2回クリックするとフォームが送信されます

Question

フォーム検証機能を作成していますが、空の入力がない場合、ボタンは2回のクリックで正しく動作します。関数を呼び出す

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回クリックする必要があるため、ボタンの中にボタンをクリックしてバインドしています。 最初にクリックしてクリックイベントをクリックしてから、2回目にクリックしてコードをトリガーします。 クリックイベントをコードから削除します。