Jquery 表單驗證 — 僅顯示一個模態，其他模態消失

Question

我創建了 JSP 頁面，其中包括 Bootstrap、Font Awsome、JQUERY 驗證插件和我創建的其他自定義 Javascript，如下所述。

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
        <script src="https://kit.fontawesome.com/8a8fadc695.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="<c:url value="/resources/js/pageloader.js" />"></script>
        <script src="<c:url value="/resources/js/bulkupload.js" />"></script>
        <script src="<c:url value="/resources/js/footer.js" />"></script>
        <link rel="stylesheet" href="<c:url value="/resources/css/bulkupload.css" />"></link>
        <link rel="icon" class="titleicon" href="images/Title_image.ico">

下面提到的是 Html 卡組件，我在其中設置了輸入文件類型，包括模態文件。

   <div class="container-fluid">
       <form id="blkuploadform">
           <div class="card">
                       <div class="card-header bg-info">
                           BERICHT DATEI IMPORTIEREN
                       </div>
                       <div class="card-body"> 
                               <div class="form-group">
                                           <h6>Datei Importieren Method :</h6>
                                           <p>Diese Seite wird verwendet, um die Datei mit 1 oder mehr als 1 Berichtsdatensätzen gleichzeitig in die Datenbank hochzuladen.</p>
                                           <br>
                                           <input type="file" id="blkUploadReport" name="blkUploadReport"  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">  <span class="fas fa-asterisk"></span>
                               </div>
                               <div class="form-group">
                                   <div class="col-sm-offset-2 col-sm-6">
                                       <button class="btn btn-success btn-raised btn-sm" id="saveEdit" onClick="bulkupdValidator()">
                                           IMPORTIEREN <span class="fas fa-save"></span> 
                                       </button>                   
                                   </div>  
                               </div>
                       </div>
           </div>
       </form>
   </div>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
       <div class="container-fluid">
             <p class="navbar-text pull-left" id="copyyear"></p>
             <p class="navbar-text pull-left" >Environment:${e:forHtml(env)} Version:${e:forHtml(ver)}</p>       
       </div>
   </nav>
   <div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
           <div class="modal-dialog">
               <div class="modal-content">            
                   <div class="modal-header">
                       <h4 class="modal-title" id="myModalLabel1">Bestätigung</h4>
                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                   </div>            
                   <div class="modal-body">
                      <p>Sie sind im Begriff Berichtsdaten zu speichern. Möchten Sie fortfahren?</p>                    
                   </div>                
                   <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">NEIN</button>
                       <button type="button" class="btn btn-danger" data-dismiss="modal" onClick="blksavedata(report)">JA</button>
                   </div>
               </div>
           </div>
   </div>
   <div class="modal fade" id="error-message" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
           <div class="modal-dialog">
               <div class="modal-content">            
                   <div class="modal-header">
                       <h4 class="modal-title" id="myModalLabel2">Fehler</h4>
                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                   </div>            
                   <div class="modal-body">
                      <p id="error"></p>                    
                   </div>                
                   <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">Schliessen</button>
                   </div>
               </div>
           </div>
   </div>
   <div class="modal fade" id="success-message" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
           <div class="modal-dialog">
               <div class="modal-content">            
                   <div class="modal-header">
                       <h4 class="modal-title" id="myModalLabel3">Erfolg</h4>
                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                   </div>            
                   <div class="modal-body">
                      <p id="success"></p>                   
                   </div>                
                   <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">Schliessen</button>
                   </div>
               </div>
           </div>
   </div>

這里的按鈕單擊驗證輸入文件類型，如下所述，並顯示基於驗證的模式。

    function bulkupdValidator(){
        if($('#blkuploadform').valid()){
            $('#confirm-save').modal('show');
        }
        else{
            document.getElementById("error").innerText="Bitte füllen Sie die erforderlichen Felder mit rotem Text aus.";
             $('#error-message').modal('show');
        }
        
    }
    
    $(document).ready(function(){
        $('#blkuploadform').validate({
            rules:{
                blkUploadReport:{
                    required:true,
                    extension:'xlsx'
                }
            },
            messages:{
                blkUploadReport:{
                    required:"Bitte laden Sie die Datei im gewünschten Format (.xlsx) hoch.",
                    extension:"Bitte laden Sie die Datei im gewünschten Format (.xlsx) hoch."
                }
            }
        })
    })
    
    //Function to Validate the data from uploaded file
    
    function blksavedata(typeOfData){
        console.log(typeOfData);
        console.log(document.getElementById("blkUploadReport2"));
    }

因此，當輸入類型被驗證時，它會顯示確認保存模式，但它會在幾秒鍾內消失。 當它未被驗證時，它會適當地顯示錯誤消息而不會消失。 因此，我嘗試放置確認保存模式以在未成功驗證的情況下顯示，並且我在未上傳任何文件的情況下對其進行了測試，然后出現任何問題。 因此，我得出結論，這不是模態重復加載的問題。 相反，這是 JQUERY Validate 插件的問題。 驗證成功后，是如何關閉模態的。 有人對如何解決此問題有想法嗎？

Answer 1

我已將按鈕移出表單，然后在成功驗證后開始出現模式。

工作示例在這里。 關聯