javascript - 为什么我不能使用引导类表单控件在我的元素中添加另一个类？如果我添加但它不起作用

Question

当我尝试使用 element.classList.add("anyClass"); 插入类时，它不起作用，如果它有我在内部代码中给出的表单控制引导类，如果我使用 remove 而不是 add 并输入 element.classList.remove("form-control"); 它工作正常

function validation() {
  var first_name = document.getElementById("first_name");
  // var last_name=document.getElementById("last_name");
  // var address=document.getElementById("address");
  // var phone_no=document.getElementById("phone_no");
  // var email=document.getElementById("email");

  if (first_name.value === "") {
    first_name.classList.add("add_border_left");
    first_name.focus();
    return false;
  }
  return true;
}

.add_border_left {
  border-left: #d9534f 4px solid;
}

<div class="row">
  <label for="">First Name</label>
  <input class="form-control" onkeydown="clear_first_name();" autocomplete="off" type="text" id="first_name" autofocus>
  <!-- <label  id="valid_first_name" for="">Please Enter Valid First Name</label> -->
</div>
<div class="row">
  <button type="submit" style=" margin-top: 30px; letter-spacing: 2px;" class="btn btn-outline-info btn-block">Submit</button>
</div>

Answer 1

请您也提及 clear_first_name() 方法。

现在，我只是将 validation() 方法放在替换它和添加类上。

function validation()
{
    var first_name=document.getElementById("first_name");
    // var last_name=document.getElementById("last_name");
    // var address=document.getElementById("address");
    // var phone_no=document.getElementById("phone_no");
    // var email=document.getElementById("email");
console.log(first_name.value)

   
    if(first_name.value === "")
    {
        first_name.classList.add("add_border_left");
        first_name.focus();
        return false;
    }
    return true;
  }

.add_border_left
{
   border-left: #d9534f 4px solid;
}

<div class="row">
                        <label for="">First Name</label>
                        <input class="form-control" onkeydown="validation();" autocomplete="off"  type="text"
                            id="first_name" autofocus>
                        <!-- <label  id="valid_first_name" for="">Please Enter Valid First Name</label> -->
                    </div>
                      <div class="row">
                        <button type="submit" style=" margin-top: 30px; letter-spacing: 2px;"
                         class="btn btn-outline-info btn-block">Submit</button>
                    </div>