html - Javascript - Remove Modal Error/Success messages if modal is closed -
i have created twitter bootstrap modal, includes form submission. form includes javascript validations.
when close modal, or click anywhere else, , open again modal, js error/success styling remains still there.
how can make css error/success styling not appear if modal closed or focus modal 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 @ 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 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 way short!!!"; if (dep_name === "") { document.getelementbyid('department_name_errors').innerhtml = "please enter 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 way short!!!"; if (dep_street === "") { document.getelementbyid('department_street_errors').innerhtml = "please enter 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 jsfiddle: https://jsfiddle.net/vagg77/88sqeran/
you need handle modal closing event.
for example:
$('#add_new_record_modal').on('hidden.bs.modal', function () { $('#department_street_errors').text(''); $('#department_name_errors').text(''); $('#department_name').removeattr('style'); $('#department_street').removeattr('style'); })
Comments
Post a Comment