jQueryのポストフォーム機能は、投稿された二回

Question

私は、フォームに必要なフィールドをチェックするためのjQueryの機能います、私は、ページの読み込みで

function CheckRequired(event) { 

    var $form = $(this); 

    var emptyElements = $form.find('.required').filter(function() { 
     return this.value === '' 
    }); 

    if(emptyElements.length > 0) { 
     event.preventDefault(); 

     emptyElements.addClass("EmptySelect").attr('title', 'This field is required'); 

     //alert(emptyElements.attr("id")); 
     alert("One or more fields cannot be blank"); 

     event.stopImmediatePropagation(); 
     return false; 
    } 
} 

を実行します。すべてのフォームに関数を適用する

$('form').on('submit', CheckRequired); 

。

requiredクラスの入力が空の場合、この関数は正常に機能し、エラーをスローします。

私もこの機能を持っている投稿ポップアップ/モーダルボックス内のフォーム：細かすぎるここで再び

function post_form(form_id, type, redir_url, loading_modal) { 
    type = type || ''; 
    redir_url = redir_url || ''; 
    loading_modal = loading_modal || ''; 

    $(form_id).submit(function(e) { 
     var formObj = $(this); 
     var formURL = formObj.attr("action"); 
     var formData = new FormData(this); 

     CheckRequired(e); 

     if(loading_modal === '1') { 
      //do nothing 
     } else { 
      LoadModalBody('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'Loading'); 
     } 

     $.ajax({ 
      url : '/section' + formURL, 
      type: "POST", 
      data : formData, 
      mimeType:"multipart/form-data", 
      contentType: false, 
      cache: false, 
      processData:false, 
      success:function(data, textStatus, jqXHR) { 
       if(type === 'modal') { 
        if(redir_url === '') { 
         LoadModal('/section' + formURL, ''); 
        } else { 
         LoadModal('/section' + redir_url, ''); 
        } 
       } else if(type === 'reload') { 
        if(redir_url === '') { 
         location.reload(); 
        } else { 
         OpenPage(redir_url); 
        } 
       } else if(type === 'body') { 
        LoadModalBody(data, ""); 
       } else { 
        //close the loading modal 
        if(loading_modal === '1') { 
         //do nothing 
        } else { 
         CloseModal(); 
        } 
        //location.reload(); 
        //$("body").html(data); 
       } 
      }, 
      error: function(jqXHR, textStatus, errorThrown) { 
       //if fails 
      } 
     }); 
     return false; 
     e.preventDefault(); 
    }); 
} 

、CheckRequired機能の作業が、エラーがスローされたときに入力が必要に応じて修正されますフォームは再度転記されますが、2回提出されます

Answer 1

CheckRequiredは、空欄が見つかった場合にのみ送信されます。

formが正しく入力されると、通常のブラウザbeahvior およびのAjaxがトリガーされるため、フォームが送信されます。

<form onsubmit="post_form(...);"> 

このpost_form機能：

完全なコードと

---

EDITこの時間...チャットで

は、私は、JavaScriptのようなインラインを使用してpost_form関数を呼び出したdicoveredそれがトリガされるたびに新しいsubmit()ハンドラをDOMに設定しています。

はこれを修正するには、今のユニークなsubmit()ハンドラにバインドするclassを使用します。
フォームの特定のパラメータを保持するために、data属性を使用します。

<form class="myForms" data-type="..." data-redir_url="..." data-loading_modal="..."> 

そして、ここで私が提案し、全体変更したコードです：

function CheckRequired(event) { 

    var $form = $(this); 

    var emptyElements = $form.find('.required').filter(function() { 
    return this.value === '' 
    }); 

    if(emptyElements.length > 0) { 
    event.preventDefault(); 

    emptyElements.addClass("EmptySelect").attr('title', 'This field is required'); 

    //alert(emptyElements.attr("id")); 
    alert("One or more fields cannot be blank"); 

    event.stopImmediatePropagation(); 
    return true; 
    }else{ 
    return false; 
    } 
} 


$(".myForms").submit(function(e) { 
    e.preventDefault(); 

    var type = $(this).data("type"); 
    var redir_url = $(this).data("redir_url"); 
    var loading_modal = $(this).data("loading_modal"); 

    var formObj = $(this); 
    var formURL = formObj.attr("action"); 
    var formData = new FormData(this); 

    // Check for empty fields 
    var isEmptyFields = CheckRequired(e); 


    // If no empty fields, Proceed! 
    if(!isEmptyFields){ 

    if(loading_modal === '1') { 
     //do nothing 
    } else { 
     LoadModalBody('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'Loading'); 
    } 

    $.ajax({ 
     url : '/section' + formURL, 
     type: "POST", 
     data : formData, 
     mimeType:"multipart/form-data", 
     contentType: false, 
     cache: false, 
     processData:false, 
     success:function(data, textStatus, jqXHR) { 
     if(type === 'modal') { 
      if(redir_url === '') { 
       LoadModal('/section' + formURL, ''); 
      } else { 
       LoadModal('/section' + redir_url, ''); 
      } 
     } else if(type === 'reload') { 
      if(redir_url === '') { 
       location.reload(); 
      } else { 
      OpenPage(redir_url); 
      } 
     } else if(type === 'body') { 
      LoadModalBody(data, ""); 
     } else { 
      //close the loading modal 
      if(loading_modal === '1') { 
       //do nothing 
      } else { 
       CloseModal(); 
      } 
      //location.reload(); 
      //$("body").html(data); 
     } 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
     //if fails 
     } 
    }); 
    } 

    // return false;    // I don't see any use to it. 
    // e.preventDefault();  // Was useless anyway, after a return. 
});