I have a project in progress that requires users to input data on a modal view and save it.
The validation process highlights any errors with the following CSS snippet:
.erroreEvidenziato {
border: 1px solid red;
}
Here is the HTML code for the modal view:
<div id=nuovaAssociazione class="modal">
<div class="modal-content small smallModalAgency">
<div class="title">
<span class="info">
<em>* </em> {{#i18n}}mandatoryField{{/i18n}}
</span>
<h3 id="titoloModale"></h3>
<input type="hidden" id="idAgency" value="">
</div>
[...]
</div>
</div>
This is how the modal looks like: https://i.stack.imgur.com/OYQ5R.png
The saveAssociazione() method, responsible for saving the record, is structured as follows:
function saveAssociazione() {
$(".erroreModaleDiv").hide();
[...]
}
This is how the modal appears if some fields aren't filled: https://i.stack.imgur.com/F91ki.png
On closing the modal, all erroreEvidenziato classes are removed via the closeModal() function:
function closeModal(modal) {
$(".erroreModaleDiv").hide();
[...]
}
However, there seems to be an issue when using Firefox (version 69). After saving a record with unfilled fields, reopening the modal displays remnants of the erroreEvidenziato class. This occurs specifically on the jQuery datepickers initialized as follows:
$("#validity_a").datepicker({
showWeek: true,
[...]
});
$("#validity_da").datepicker({
showWeek: true,
[...]
});
What could be causing this unexpected behavior?