title: Javascript - Remove Modal Error/Success messages if modal is closed
body: <p>I have created a Twitter Bootstrap Modal, that includes a form submission. The form includes Javascript validations.</p>
  
  <p>When I close the modal, or click anywhere else, and then open again the modal, the JS error/success styling remains still there.</p>
  
  <p><strong>How can I make the CSS error/success styling not appear if modal is closed or focus from the modal is lost?</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"&gt;
      &lt;link rel="stylesheet" href="${resource(dir: 'css', file: 'myStylesheet.css')}" type="text/css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal"&gt;Add New Department&lt;/button&gt;
  
  
  &lt;!-- Modal - Add New Record --&gt;
      &lt;div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;form id="addRecordForm" role="form" method="post" onsubmit="return addDepartmentValidation();"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Add New Department&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;p&gt;&lt;span class="required"&gt;* required field&lt;/span&gt;&lt;/p&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="department_name"&gt;Department Name&lt;/label&gt;
                              &lt;span class="required"&gt;*&lt;/span&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;span class="input-group-addon transparent"&gt;&lt;span class="glyphicon glyphicon-briefcase"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="text" id="department_name" placeholder="Enter Department Name" autocomplete="off" name="department_name" class="form-control" onkeyup="addDepartmentNameValidation();"/&gt;
                              &lt;/div&gt;
                              &lt;div class="error-messages" id="department_name_errors"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="department_street"&gt;Department Street&lt;/label&gt;
                              &lt;span class="required"&gt;*&lt;/span&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;span class="input-group-addon transparent"&gt;&lt;span class="glyphicon glyphicon-briefcase"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="text" id="department_street" placeholder="Enter Department Street" autocomplete="off" name="department_street" class="form-control" onkeyup="addDepartmentStreetValidation();"/&gt;
                              &lt;/div&gt;
                              &lt;div class="error-messages" id="department_street_errors"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                          &lt;button type="submit" class="btn btn-primary from-control" value="addRecord"&gt;Add Department&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>window.addDepartmentValidation = function(){
      var add_department_name_validation_value = addDepartmentNameValidation();
      var add_department_street_validation_value = addDepartmentStreetValidation();
      if ( (add_department_name_validation_value)&amp;&amp;(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 &lt;= 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 &lt;= 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;
  }
  </code></pre>
  
  <p>Link to JsFiddle: <a href="https://jsfiddle.net/vagg77/88sqeran/" rel="nofollow noreferrer">https://jsfiddle.net/vagg77/88sqeran/</a></p>