jQuery .removeClass() 无法正常工作

Question

我正在执行一些自定义表单验证并突出显示用户仍需要填写的区域。我使用 .addClass 方法将类添加到字段集，该方法将字段集周围的边框更改为红色。当用户单击提交按钮时，我运行一个函数，该函数首先清除验证 css 类并重新检查表单以查看用户是否有正确的输入。调用 removeClass() 时，边框不会变回原来的颜色。它保持红色。

//Add
$('#jdeABFieldSet').addClass("validatorBox");
//Remove
$(".validatorBox").removeClass("validatorBox");

我也试过

$("#jdeABFieldSet").removeAttr('class');
$("#jdeABFieldSet").attr("class", "");

CSS

.validatorBox{
    border-color: red;
}

完整代码如下。

//This is where the class is added to change the border color to red.
switch($('#tbJDEName').val().length === 0 ||
                $('#tbMailingAddress').val().length === 0 ||
                $('#tbCity').val().length === 0 ||
                $('#tbState').val().length === 0 ||
                $('#tbZip').val().length === 0 ||
                $('#tbCounty').val().length === 0 ||
                $('#ddlLocationCode').val() === "default" ||
                $('#ddlSearchType').val() === "default") {
                    case $('#tbJDEName').val().length === 0:
                        $('#jdeABFieldSet').addClass("validatorBox");
                        $('#tbJDEName').addClass("validatorBox");
                        alert("JDE Address Book Request section must be filled out.");
                        break;
                    case $('#tbMailingAddress').val().length === 0:
                        $('#jdeABFieldSet legend').addClass("validatorText");
                        $('#jdeABFieldSet').addClass("validatorBox");
                        $("label[for='tbMailingAddress']").addClass("validatorText");
                        //$('#tbMailingAddress').addClass("validatorText");
                        alert("JDE Address Book Request section must be filled out.");
                        break;
                    case $('#tbCity').val().length === 0:
                        $('#jdeABFieldSet').addClass("validatorBox");
                        $('#tbCity').addClass("validatorText");
                        alert("JDE Address Book Request section must be filled out.");
                        break;
                    case $('#tbState').val().length === 0:
                        $('#jdeABFieldSet').addClass("validatorBox");
                        $('#tbState').addClass("validatorText");
                        alert("JDE Address Book Request section must be filled out.");
                        break;
                    case $('#tbZip').val().length === 0:
                        $('#jdeABFieldSet').addClass("validatorBox");
                        $('#tbZip').addClass("validatorText");
                        alert("JDE Address Book Request section must be filled out.");
                        break;
                    case $('#tbCounty').val().length === 0:
                        $('#jdeABFieldSet').addClass("validatorBox");
                        $('#tbCounty').addClass("validatorText");
                        alert("JDE Address Book Request section must be filled out.");
                        break;
                    case $('#ddlLocationCode').val().length === 0:
                        $('#jdeABFieldSet').addClass("validatorBox");
                        $('#ddlLocationCode').addClass("validatorText");
                        alert("JDE Address Book Request section must be filled out.");
                        break;
                    case $('#ddlSearchType').val().length === 0:
                        $('#jdeABFieldSet').addClass("validatorBox");
                        $('#ddlSearchType').addClass("validatorText");
                        alert("JDE Address Book Request section must be filled out.");
                        break;
                }

//This function is the first thing called when the user clicks submit to clear the classes
function clearValidationClass() {
            $(".validatorBox").removeClass("validatorBox");
            $(".validatorText").removeClass("validatorText");
        }

Answer 1

我的猜测是您不能从类本身中删除一个类。尝试做这样的事情:

$("#jdeABFieldSet").removeClass("validatorBox");

希望这对您有所帮助。