Javascript - モーダルが閉じられている場合、モーダルエラー/成功メッセージを削除します。

Question

私はフォーム提出を含むTwitterブートストラップモーダルを作成しました。フォームにはJavaScriptの検証が含まれています。

モーダルを閉じるか、他の場所をクリックしてモーダルを再び開くと、JSエラー/成功のスタイリングはそのまま残ります。

モーダルが閉じられているか、モーダルからのフォーカスが失われても、CSSエラー/成功スタイリングが表示されないようにするにはどうすればよいですか？

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">&times;</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; 
} 

JsFiddleへのリンク：あなたが必要https://jsfiddle.net/vagg77/88sqeran/

Answer 1

モーダルクロージングイベントを処理します。例えば

：

$('#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'); 
}) 

https://jsfiddle.net/88sqeran/9/

Answer 2

あなたにはJavascriptがリセット機能、このような何かを書きます。

window.resetForm = function(){ 
    document.getElementById('department_name').style.borderColor = "rgb(204,204,204)"; 
    document.getElementById('department_name').style.borderWidth = "1px"; 
    document.getElementById('department_name_errors').style.color = "#555"; 
    document.getElementById('department_name_errors').innerHTML = ""; 

    document.getElementById('department_street').style.borderColor = "rgb(204,204,204)"; 
    document.getElementById('department_street').style.borderWidth = "1px"; 
    document.getElementById('department_street_errors').style.color = "#555"; 
    document.getElementById('department_street_errors').innerHTML = ""; 
} 

モーダルボタンで、モーダルがロードされるたびにフォームをリセットするonclickイベントを追加します。