Javascript-如果模式关闭，则删除模式错误/成功消息

我已经创建了一个Twitter引导模式，其中包括一个表单提交。表单包括Javascript验证

当我关闭模式，或者单击其他任何地方，然后再次打开模式时，JS错误/成功样式仍然存在

如果模态关闭或模态焦点丢失，如何使CSS错误/成功样式不出现？

HTML:

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

window.addDepartmentValidation=function（）{
var add_department_name_validation_value=addDepartmentNameValidation（）；
var add_department_street_validation_value=addDepartmentStreetValidation（）；
如果（（添加部门名称验证值）和（（添加部门街道验证值））返回true；//表单已成功提交
else返回false；//表单仍有错误
}
window.addDepartmentNameValidation=函数（）{
var返回的值=true；
var dep_name=document.getElementById（'department_name'）。值；
如果（dep_name.length您需要处理模式关闭事件

例如：

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

您需要处理模式关闭事件

例如：

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

在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事件，以便在每次加载模式时重置表单

<button class="btn btn-primary" onclick="resetForm();" data-toggle="modal" data-target="#add_new_record_modal">Add New Department</button>

添加新部门
在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事件，以便在每次加载模式时重置表单

<button class="btn btn-primary" onclick="resetForm();" data-toggle="modal" data-target="#add_new_record_modal">Add New Department</button>

添加新部门
当模式打开时，您需要重置样式。创建一个重置函数，并在按钮的“onclick”事件处理程序上调用该函数。我想您可以在每次打开表单时重置表单。@bhansa表单重置不起作用。Op正在设置表单的样式。表单重置只是重置表单数据，而不是样式。Th有一些表单验证框架可以在表单重置时重置样式，但其中没有一个正在使用。Agree@Malcor，它只会删除值。当模式打开时，您需要重置样式。创建一个重置函数，并在按钮的“onclick”事件处理程序上调用该函数。我想您可以在打开表单时重置表单非常及时。@bhansa表单重置不起作用。Op正在设置表单的样式。表单重置只是重置表单数据，而不是样式。有一些表单验证框架可以在表单重置时重置样式，但其中没有一个正在使用。Agree@Malcor，它只会删除该值。那么红色边框呢？问题并不是说重新设置d borders。上面写着错误/成功消息。OP在这个答案中应该有足够的信息来判断outOP可能已经改变了问题，但它没有说任何关于消息的信息…“如果模态关闭或模态的焦点丢失，我如何使CSS错误/成功样式不出现？”在标题中有-但是我已经更新了答案。boththanks@DNKROZ现在有了，是的，我也指的是边界，它没有包含在描述中是我的错，但我很高兴更新的小提琴也删除了边界！！！关于红色边界呢？问题并没有说任何关于红色边界的内容。它说的是错误/成功消息。.OP should在这个答案中有足够的信息来判断outOP可能已经改变了问题，但它没有说任何关于消息的内容……”“如果模态关闭或模态的焦点丢失，我如何使CSS错误/成功样式不出现？”在标题中有-但是我已经更新了答案。boththanks@DNKROZ现在有了，是的，我还指了边框，这是我的错，它没有包含在描述中，但我很高兴更新的小提琴也删除了边框！！！谢谢@Malcor，你的答案也适用于我的代码谢谢@Malcor，你的答案也适用于我的代码