问题
I have created JSP page where it includes Bootstrap,Font Awsome, JQUERY Validate Plugin and other custom Javascripts created by me as mentioned below.
<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">
Below mentioned is the Html Card Component where I have set up the input file type including the modal's.
<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">×</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">×</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">×</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>
Here the Button click validate the input file type as mentioned below and shows up the modal based on validation.
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"));
}
So here when the input type is validated , it is showing up the confirm-save modal and however it is disappearing in fraction of seconds. When it is not validated, it is showing up the error-message appropriately without disappearing. So I have tried placing confirm-save modal to show up in case of not validated successfully and I have tested it without uploading any file then it shows up with any issues. Hence I concluded that this is not issues with modal duplicate loading. Instead it is an issue with JQUERY Validate plugin. After Validation is successful, it is some how closing the modal . Anybody having thoughts on how to fix this issues ?
回答1:
I have moved the button out of the form and then modal started to appear after successful validation.
Working example is here. link
来源：https://stackoverflow.com/questions/63050718/jquery-form-validation-only-one-modal-shows-up-and-other-modals-disappearing