jquery validateフォームを送信するために2回クリックする必要があります

Question

私はモーダルでフォームを持っています。フォームを完成させなければなりません（そうでなければ検証で必須フィールドエラーメッセージが表示されます）。その後、再びクリックすると、ajax経由で投稿され、「ありがとう」というメッセージが返されます。

私はStackoverflowの周りを見て、私が持っている問題への回答を適用しましたが、まだそれを動作させることはできません。私はevent.preventDefault（）を削除しました。それから$（ "＃review-form"）submit（function（event）{フォームは送信入力を1回クリックした後に送信する必要がありますが、データベースには投稿しません）

。とI $を変更（この）;私は$を削除（ "＃レビュー - フォーム"）を提出（関数（イベント）{}）：＃レビュー - フォーム

$("#review-form").validate({ 
    submitHandler: function() { 
     $("#review-form").submit(function (event) { 
      var rating = $(this).find('input[name=rating]'); 
      // var rating = $(this).find('input[name=rating]').val(); 
      var review = $(this).find('textarea[name=review]'); 
      var form_settings = $(this).find('input[name=form_settings]'); 
      var xid = $(this).find('input[name=XID]'); 
      var entry_id = $(this).find('input[name=entry_id]'); 
      var entry_type = $(this).find('input[name=entry_type]'); 
      var site_id = $(this).find('input[name=site_id]'); 
      var first_name = $(this).find('input[name=first_name]'); 
      var middle_initial = $(this).find('input[name=middle_initial]'); 

      $.ajax({ 
       url: $("#review-form").attr("action"), //your server side script 
       data: $(this).serialize(), 
       type: 'POST', 
       success: function (data) { 
        //$('#response').append('<li>' + data + '</li>'); 
        $('#review-form').hide(); 
        $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
       }, 
       error: function (jxhr, msg, err) { 
        $('#response').append('<li style="color:red">' + msg + '</li>'); 
       } 
      }); 
      event.preventDefault(); 
     }); 
    } 
}); 

UPDATEのためのjQueryの下にある

.find ...フォームのIDを＃form-reviewに指定して取得した後、dataパラメータを通って検索しました。私はすべての個々の変数をコメントアウトして、$（this）.serialize（）をdataパラメータに渡しました。

最終的な作業を

$("#review-form").validate({ 
    submitHandler: function() { 

     $.ajax({ 
      url: $("#review-form").attr("action"), //your server side script 
      data: $("#review-form").serialize(),     
      type: 'POST', 
      success: function (data) { 
       $('#review-form').hide(); 
       $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
      }, 
      error: function (jxhr, msg, err) { 
       $('#response').append('<li style="color:red">' + msg + '</li>'); 
      } 
     }); 

     event.preventDefault(); 
    } 
}); 

：コードの下にクロームとFirefoxで動作しますが、Firefoxでは、それはモーダルを閉じ、ドメインのホームページにリダイレクトすることがクロームでないように、それは、あなたがMSG感謝とのオープンモーダルを維持する必要があります製品：

$("#review-form").validate({ 
    submitHandler: function() { 

     $.ajax({ 
      url: $("#review-form").attr("action"), 
      data: $("#review-form").serialize(), 
      type: 'POST', 
      success: function (data) { 
       $('#review-form').hide(); 
       $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
      }, 
      error: function (jxhr, msg, err) { 
       $('#response').append('<li style="color:red">' + msg + '</li>'); 
      } 
     }); 
    } 
}); 

Answer 1

あなたはプラグインのsubmitHandlerコールバックの中に、新しいsubmitイベントハンドラをバインドしています。このハンドラは、送信イベントが既に進行中であるため、すぐには起動しません。

あなたはそれを必要としません。 submitHandlerコールバックはすでにpreventDefault内部でプラグインのコード

内のこの

$("#review-form").submit(function(event) { })

を削除し、データ用serialize()を使用しているので、直接submitHandler

以内に、それに含まれるすべてのコードを保持します...あなたが作成する個々のフィールド変数のいずれも作成する必要はありません

Answer 2

私は同じ問題がありましたそして、私の検証に次を追加して、それを解決：

$("#myform").validate({ 
    onfocusout: false 
}); 

onfocusoutがあなたのフォームフィールドからフォーカスを削除し、ボタンが最初のクリックで動作します提出します。

がhttps://jqueryvalidation.org/validate/