Why I can't add another class inside my element with bootstrap class form-control? if I add but it does not work

Question

When I try to insert class using element.classList.add("anyClass"); it does not work, if it had form-control bootstrap class as I have given inside code, if I use remove instead of add and type element.classList.remove("form-control"); it works fine

 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

Would you please also mention clear_first_name() method.

For now, I just place validation() method on replacing of that and class is added.

 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>