javascript： 'モーダル' divを追加する方法、または少なくとも読み込みが終了するまで遅らせる

Question

フィールドがあるフォームがあります。 フィールドの一部に塗りつぶしがない場合 - 警告を表示したい。 他のフィールドが入力されていない場合は、「ソフトアラート」を表示してフォームを送信します。

javascriptアラートウィンドウを使用すると、すべて正常に動作します。

私のメッセージにshow \ hide DIVを使用すると、ユーザーがメッセージを読むことを管理する前にフォームが送信されます。

setTimeoutを使用しようとしましたが動作しません。

アイデア？

似質問が、 'ソフトの警告' なし： Onclick validate form, if valid only submit form jQuery Modal that appears on form submit

私のJavaScriptコード：

// - - - - - - - - 
    // - $popUp alert: 
    // - - - - - - - - 
    $('#popUpCloseBtn').click(function() { 
     $('#popUpMainText').html(''); 
     $('#popUpHeaderText').html(''); 
     $('#popUpContainer').css("display", "none"); 
    }); 

    function popUpShow() { 
     var popUpObj = document.getElementById("popUpContainer"); 
     popUpObj.style.display = "block"; 

     var topPos = 200; // ($(window).height()/2) - (popUpObj.offsetHeight/2); 
     var leftPos = ($(window).width()/2) - (popUpObj.offsetWidth/2); 

     popUpObj.style.top = topPos + "px"; 
     popUpObj.style.left = leftPos + "px"; 

    } 

    function showAlert(htmlTitle, htmlText, isErr) { 
    if (isErr) { 
     $('#popUpMainText').addClass("popUpTextError").removeClass("popUpTextSuccess"); 
    } else { 
     $('#popUpMainText').addClass("popUpTextSuccess").removeClass("popUpTextError"); 
    } 
    $('#popUpMainText').html(htmlText); 
    $('#popUpHeaderText').html(htmlTitle); 
    popUpShow(); 
    } 


    // - - - - - - - - 
    // - submit form: 
    // - - - - - - - - 

    $("#Save").click(function(){ 
     return SaveSubmit(); 
    }); 


    function SaveSubmit() { 

     var isEmptyField1 = (document.getElementById('f1').value.trim() == '') 
     var isEmptyField2 = (document.getElementById('f2').value.trim() == '') 

     var strErr = ""; 
     if (isEmptyField1) { 
     strErr += "<b>WARNING ! YOU CAN NOT CONTINUE.</b>" + "<br />"; 
     strErr += "The following fields are empty, please enter them to continue:" + "<br />"; 
     strErr += "field 1 <br />"; 
     strErr += "field 2 <br />"; 

     // alert(strErr); 
     var popUpTitle = "Alert"; 
     var popUpText = strErr; 
     var popUpIsErr = true; 
     showAlert(popUpTitle, popUpText, popUpIsErr); 
     return false; 
     } 

     if (isEmptyField2) { // 'soft-alert' : 
     strErr += "FOR INFORMATION ! The following fields are empty: " + "<br />"; 
     strErr += "field 3 \n"; 
     strErr += "field 4 \n"; 

     // alert(strErr); 
     var popUpTitle = "Alert"; 
     var popUpText = strErr; 
     var popUpIsErr = false; 
     showAlert(popUpTitle, popUpText, popUpIsErr); 
     setTimeout(function() { 
      var x = " // wait a little, so the user can read the message"; 
      document.form_display.submit(); 
      return true; 
     }, 20 * 1000); // It does not wait 20 seconds!!! 
     // do not return false! 
     } 


     // If gets here, all is ok . . . 
     document.form_display.submit(); 
     return true; 
    } 

私のHTMLコード：

 <FORM . . .> 
      . . . 
      <input type="submit" name="Save" id="Save" value="Enregistrer" > 
    </FORM> 


<div id="popUpContainer" class="popUpContainer"> 
     <div class="popUpHeader" ><span id="popUpHeaderText" ></span></div> 
     <div class="popUpMain" ><span id="popUpMainText"></span></div> 
     <div class="popUpFooter" ><input id="popUpCloseBtn" type="submit" value="Close" /></div> 
</div> 

Answer 1

私は、コードを変更： SaveSubmit（）はフォームを送信しません。代わりに、ソフトの警告のための特別な「閉じる」ボタンが提出されています

$('#popUpCloseBtn').click(function() { 
    popUpClose(); 
    }); 
    $('#popUpCloseAndSaveBtn').click(function() { 
    // popUpClose(); 
    document.form_display.submit(); 
    }); 

    function showAlert(htmlTitle, htmlText, isErr) { 
    if (isErr) { 
     $('#popUpCloseBtn').css("display", "block"); 
     $('#popUpCloseAndSaveBtn').css("display", "none");  
    } else { 
     $('#popUpCloseAndSaveBtn').css("display", "block"); 
     $('#popUpCloseBtn').css("display", "none");  
    } 
    . . . 

    function SaveSubmit() { 
    . . . 
    if (isEmptyField2) { 
    . . . 
     showAlert(popUpTitle, popUpText, popUpIsErr); 
     return false; // the DIV.closeAndSaveBtn will submit the form