Question posted in 
I have created a Twitter Bootstrap Modal, that includes a form submission. The form includes Javascript validations.
When I close the modal, or click anywhere else, and then open again the modal, the JS error/success styling remains still there.
How can I make the CSS error/success styling not appear if modal is closed or focus from the modal is lost?
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'myStylesheet.css')}" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Department</button>
<!-- Modal - Add New Record -->
<div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form id="addRecordForm" role="form" method="post" onsubmit="return addDepartmentValidation();">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Department</h4>
</div>
<div class="modal-body">
<p><span class="required">* required field</span></p>
<div class="form-group">
<label for="department_name">Department Name</label>
<span class="required">*</span>
<div class="input-group">
<span class="input-group-addon transparent"><span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id="department_name" placeholder="Enter Department Name" autocomplete="off" name="department_name" class="form-control" onkeyup="addDepartmentNameValidation();"/>
</div>
<div class="error-messages" id="department_name_errors"></div>
</div>
<div class="form-group">
<label for="department_street">Department Street</label>
<span class="required">*</span>
<div class="input-group">
<span class="input-group-addon transparent"><span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id="department_street" placeholder="Enter Department Street" autocomplete="off" name="department_street" class="form-control" onkeyup="addDepartmentStreetValidation();"/>
</div>
<div class="error-messages" id="department_street_errors"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary from-control" value="addRecord">Add Department</button>
</div>
</div>
</form>
</div>
</div>
CSS:
.container .jumbotron /* employees-departmentents jumbotron */
{
margin-top: 100px;
}
.modal-dialog .modal-content .modal-header /* Update/Add Record Modals Headers */
{
background-color: #2A6496;
color: white;
}
.required /* Required Fields at Forms */
{
color: red;
font-weight: bold;
}
.error-messages
{
color: red;
font-weight: bold;
}
JavaScript:
window.addDepartmentValidation = function(){
var add_department_name_validation_value = addDepartmentNameValidation();
var add_department_street_validation_value = addDepartmentStreetValidation();
if ( (add_department_name_validation_value)&&(add_department_street_validation_value) ) return true; // form successfully submitted
else return false; // form still has errors
}
window.addDepartmentNameValidation = function(){
var returned_value = true;
var dep_name = document.getElementById('department_name').value;
if (dep_name.length <= 2) {
document.getElementById('department_name').style.borderColor = "red";
document.getElementById('department_name').style.borderWidth = "2px 2px 2px 2px";
document.getElementById('department_name_errors').style.color = "red";
document.getElementById('department_name_errors').innerHTML = "Department Name is way too short!!!";
if (dep_name === "") {
document.getElementById('department_name_errors').innerHTML = "Please enter a Department Name!!!";
}
returned_value = false;
}
else {
document.getElementById('department_name').style.borderColor = "green";
document.getElementById('department_name_errors').style.color = "green";
document.getElementById('department_name_errors').innerHTML = "Department Name is: VALID";
}
if (document.getElementById('department_name').value.match(/(1|2|3|4|5|6|7|8|9|0)/)) {
document.getElementById('department_name').style.borderColor = "red";
document.getElementById('department_name_errors').style.color = "red";
document.getElementById('department_name_errors').innerHTML = "Department Name must NOT contain numbers!!!";
returned_value = false;
}
return returned_value;
}
window.addDepartmentStreetValidation = function(){
var returned_value = true;
var dep_street = document.getElementById('department_street').value;
if (dep_street.length <= 2) {
document.getElementById('department_street').style.borderColor = "red";
document.getElementById('department_street').style.borderWidth = "2px 2px 2px 2px";
document.getElementById('department_street_errors').style.color = "red";
document.getElementById('department_street_errors').innerHTML = "Department Street is way too short!!!";
if (dep_street === "") {
document.getElementById('department_street_errors').innerHTML = "Please enter a Department Street!!!";
}
returned_value = false;
}
else {
document.getElementById('department_street').style.borderColor = "green";
document.getElementById('department_street_errors').style.color = "green";
document.getElementById('department_street_errors').innerHTML = "Department Street is: VALID";
}
return returned_value;
}
Link to JsFiddle: https://jsfiddle.net/vagg77/88sqeran/
2
Answers
You need to handle the modal closing event.
For example:
https://jsfiddle.net/88sqeran/9/
In you Javascript write a reset function, something like this.
On your modal button add an onclick event to reset the form each time the modal is loaded.