0

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

Link to JsFiddle: https://jsfiddle.net/vagg77/88sqeran/

Greg Burghardt
  • 17,900
  • 9
  • 49
  • 92
ceid-vg
  • 323
  • 2
  • 9
  • 21
  • You need to reset your styling when the modal opens. Create a reset function and call that function on the 'onclick' event handler for the button. – Malcor Sep 12 '17 at 13:34
  • I guess you can reset your form when you are opening it every time. – bhansa Sep 12 '17 at 13:42
  • 1
    @bhansa a form reset wouldn't work. Op is setting the styles of the form. A form reset just resets the form data, not styling. There are form validation frameworks that would reset styling on a form reset but non of which are in use. – Malcor Sep 12 '17 at 13:44
  • Agree @Malcor, It only removes the value. https://stackoverflow.com/questions/38727891/clear-form-after-submission-in-javascript#38727964 – bhansa Sep 12 '17 at 13:45

2 Answers2

2

You need to handle the 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');
})

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

DNKROZ
  • 2,634
  • 4
  • 25
  • 43
  • What about red borders? – Abhishek Pandey Sep 12 '17 at 13:44
  • Question doesn't saying anything about red borders. It says Error/Success messages.. OP should have enough info in this answer to figure that out – DNKROZ Sep 12 '17 at 13:45
  • OP may have changed the question but it doesn't say anything about messages... "How can I make the CSS error/success styling not appear if modal is closed or focus from the modal is lost?" – Malcor Sep 12 '17 at 13:49
  • 1
    Does in the title - however I've updated the answer. Now does both – DNKROZ Sep 12 '17 at 13:51
  • thanks @DNKROZ, yeah I also meant the borders and its my fault that it was not included in the description, but I am glad the updated fiddle also removed the borders!!! – ceid-vg Sep 12 '17 at 15:36
  • No worries glad to help. By the way @ceid-vg, you're including jQuery but still using plain javascript - that could probably be changed which could cut a lot of your code down! – DNKROZ Sep 12 '17 at 15:38
1

In you Javascript write a reset function, something like this. 

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 = "";
}

On your modal button add an onclick event to reset the form each time the modal is loaded.

<button class="btn btn-primary" onclick="resetForm();" data-toggle="modal" data-target="#add_new_record_modal">Add New Department</button>
Malcor
  • 2,667
  • 21
  • 29