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");

希望得到这个帮助。

jQuery .removeClass（）无法正常工作

1 个答案: