Border color in JavaScript form doesn't override

textbox border color change javascript
javascript border width
css border-color
jquery border-color
html image border color
how to make borders in javascript
css border js
how to change border color

I am working on a script that validates an input field onkeyup. Whenever there's a parameter of the validation function isn't fullfilled I want the border color to be red, and when all the parameters are passed I want it to be green. The problem is, as soon as the paramater is passed, the border color is turned to green (which it should do), however, as soon as it doesn't meet a previous parameter (like it the input has numbers when it shouldn't), the border remains green and doesn't turn to red (the expected outcome). Any help would be greatly appreciated. Have a greet weekend!

function validateSignUpKeyup() {
  var first = document.getElementById("first").value;
  var last = document.getElementById("last").value;
  var email1 = document.getElementById("email1").value;
  var password1 = document.getElementById("password1").value;
  var parentFirst = document.getElementById("parent-first").value;
  var parentLast = document.getElementById("parent-last").value;
  var childFirst = document.getElementById("child-first").value;
  var email2 = document.getElementById("email2").value;
  var password2 = document.getElementById("password2").value;
  var month1 = document.getElementById("month1").value;
  var day1 = document.getElementById("day1").value;
  var year1 = document.getElementById("year1").value;
  var month2 = document.getElementById("month2").value;
  var day2 = document.getElementById("day2").value;
  var year2 = document.getElementById("year2").value;
  var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  var nameFilter = /^([^0-9]*)$/;

  // First name can't be blank
  if (first == "") {
    document.getElementById("first").className = document.getElementById("first").className + " error";
    document.getElementById("firstid").innerHTML = "Can't be blank";
  }

  // First name can't be a number
  else if (!nameFilter.test(first)) {
    document.getElementById("first").className = document.getElementById("first").className + " error";
    document.getElementById("firstid").innerHTML = "Can't have numbers";
  }

  // First name can't be longer than 50 characters
  else if (first.length > 50) {
    document.getElementById("first").className = document.getElementById("first").className + " error";
    document.getElementById("firstid").innerHTML = "Name is too long";
  }

  // First name no error
  else {
    document.getElementById("first").className = document.getElementById("first").className + " no-error";
    document.getElementById("firstid").innerHTML = "";
  }
}
body {
  background-image: url(../../Icons/violin.jpeg);
  background-repeat: no-repeat;
  background-position: center absolute;
}

@media only screen and (min-width: 768px) {
  #box {
    margin-top: 60px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 768px) {
  body {
    background-size: cover;
  }
}

#box {
  border-radius: 5px;
  background: white;
}

.blue-button {
  background-color: #00b4ff;
  color: #fff;
  margin-top: 2.8%;
  margin-bottom: 2.5%;
  width: 100%;
}

#logo {
  margin-top: 20px;
}

h1 {
  font-size: 1em;
  font-weight: normal;
  margin-top: 15px;
  margin-bottom: 15px;
}

#individual {
  display: block;
}

#parent {
  display: none;
}

#small {
  font-size: 0.8em;
}

.month-space {
  margin-right: 0.9em;
}

.day-space {
  margin-right: 0.9em;
}

.year-space {
  margin-right: 0.9em;
}

.radio {
  margin-bottom: 15px;
}

.error {
  border: 2px solid red;
}

.no-error {
  border-color: green;
}
<!DOCTYPE HTML>
<html lang="en">

<head>
  <!-- Meta tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Page description">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!--- Include CSS -->
  <link rel="stylesheet" href="Student-Sign-Up.css" type="text/css" />

  <title>Music Lessons with Online Teachers - Muebie</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-5 mx-auto" id="box">

        <!-- Logo and Sign Up Text -->
        <div class="text-center">
          <a href="#">
            <img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
          </a>
          <h1>Signing up as</h1>
        </div>

        <!-- Radio check 1 -->
        <div class="form-check form-check-inline radio">
          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked> Individual
                        </label>
        </div>

        <!-- Radio check 2 -->
        <div class="form-check form-check-inline radio">
          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"> Parent of a child
                        </label>
        </div>

        <!-- Individual Form -->
        <form id="individual" action="#" method="POST" autocomplete="off">

          <!-- Individual First Name -->
          <div class="form-group">
            <span id="firstid" class="text-warning"></span>
            <input class="form-control" id="first" name="first" type="text" placeholder="First name" onkeyup="validateSignUpKeyup()" />
          </div>

          <!-- Individual Last Name -->
          <div class="form-group">
            <span id="lastid" class="text-warning"></span>
            <input class="form-control" id="last" name="last" type="text" placeholder="Last name" />
          </div>

          <!-- Individual Email -->
          <div class="form-group">
            <span id="email1id" class="text-warning"></span>
            <input class="form-control email" id="email1" name="email" type="text" placeholder="Email" />
          </div>

          <!-- Individual Password -->
          <div class="form-group">
            <span id="password1id" class="text-warning"></span>
            <input class="form-control" id="password1" name="password" type="password" placeholder="Password" />
          </div>

          <!-- Individual's Birthday -->
          <div class="form-group">
            <label>Birthday</label>
            <div class="form-inline">
              <!-- Month -->
              <select id="month1" name="month" onChange="changeDate1(this.options[selectedIndex].value);" class="form-control month-space">
                <option value="na">Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
              </select>

              <!-- Day -->
              <select name="day" id="day1" class="form-control day-space">
                <option value="na">Day</option>
              </select>

              <!-- Year -->
              <select name="year" id="year1" class="form-control year-space">
                <option value="na">Year</option>
              </select>

              <span id="date1id" class="text-warning"></span>
            </div>
          </div>

          <button type="submit" name="submit" class="btn blue-button">Confirm</button>

        </form>

        <!-- Parent Form -->
        <form id="parent" class="hidden" action="#" method="POST" onsubmit="return validateStudentSignUpForm()" autocomplete="off">

          <!-- Parent's First Name -->
          <div class="form-group">
            <span id="parent-firstid" class="text-warning"></span>
            <input class="form-control" id="parent-first" name="parent-first" type="text" placeholder="Parent's first name" />
          </div>

          <!-- Parent's Last Name -->
          <div class="form-group">
            <span id="parent-lastid" class="text-warning"></span>
            <input class="form-control" id="parent-last" name="parent-last" type="text" placeholder="Parent's last name" />
          </div>

          <!-- Parent Email -->
          <div class="form-group">
            <span id="email2id" class="text-warning"></span>
            <input class="form-control" id="email2" name="email" type="text" placeholder="Email" />
          </div>

          <!-- Parent Password -->
          <div class="form-group">
            <span id="password2id" class="text-warning"></span>
            <input class="form-control" id="password2" name="password" type="password" placeholder="Password" />
          </div>

          <!-- Child's First Name -->
          <div class="form-group">
            <span id="child-firstid" class="text-warning"></span>
            <input class="form-control" id="child-first" name="child-first" type="text" placeholder="Child's first name" />
          </div>

          <!-- Child's Birthday -->
          <div class="form-group">
            <label>Child's birthday</label>
            <div class="form-inline">
              <!-- Month -->
              <select id="month2" name="month" onChange="changeDate2(this.options[selectedIndex].value);" class="form-control month-space">
                <option value="na">Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
              </select>

              <!-- Day -->
              <select name="day" id="day2" class="form-control day-space">
                <option value="na">Day</option>
              </select>

              <!-- Year -->
              <select name="year" id="year2" class="form-control year-space">
                <option value="na">Year</option>
              </select>

              <span id="date2id" class="text-warning"></span>
            </div>
          </div>

          <button type="submit" name="submit" class="btn blue-button">Confirm</button>
        </form>

        <p class="text-center" id="small">By signing up you agree to our
          <a href="#">Terms of Use</a> and
          <a href="#">Privacy Policy</a>
        </p>
      </div>
    </div>
  </div>

  <!-- Date Script -->
  <script src="Date.js"></script>

  <!-- Form Validation Scripts -->
  <script src="Validate-Form.js"></script>
  <script src="Validate-Form-Keyup.js"></script>

  <!-- Radio Check Script -->
  <script src="Radio-Check.js"></script>

  <!--- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Your selectors need to be more specific than the Bootstrap selectors that are being applied. See the CSS comments for details.

Next, your validation function doesn't seem to ever return anything, so the submit event will never be stopped when you have invalid data. Do all your event handling in JavaScript with modern code using .addEventListener(), not in HTML with event attributes. When you use this model, your event handling function will automatically be passed an event object and that object is what you can call .preventDefault() on to cancel an event.

Also, working with the element.classList API is much simpler than working with the element.className property.

Additionally, use .textContent when setting/getting strings that do not contain any HTML and use .innerHTML only when the strings do contain HTML (as .innerHTML causes the browser to parse the HTML from the string, which is a waste of resources when there isn't any).

// Get all the DOM references you'll need, just once when the DOM is ready and don't
// set your variables directly to properties of those elements because if you ever
// decide you want a different property of a DOM object, you'll have to query the DOM
// for the same element all over again.
var first = document.getElementById("first");
var firstID = document.getElementById("firstid");
var last = document.getElementById("last");
var email1 = document.getElementById("email1");
var password1 = document.getElementById("password1");
var parentFirst = document.getElementById("parent-first");
var parentLast = document.getElementById("parent-last");
var childFirst = document.getElementById("child-first");
var email2 = document.getElementById("email2");
var password2 = document.getElementById("password2");
var month1 = document.getElementById("month1");
var day1 = document.getElementById("day1");
var year1 = document.getElementById("year1");
var month2 = document.getElementById("month2");
var day2 = document.getElementById("day2");
var year2 = document.getElementById("year2");

// Well get the radio buttons and put them into an array for easier looping
var radios = Array.prototype.slice.call(document.querySelectorAll("input.type['radio'].form-check-input"));

// Configure event handlers in JavaScript, not in HTML
document.querySelector("form").addEventListener("submit", validateSignUpKeyup);
first.addEventListener("input", validateSignUpKeyup);
month1.addEventListener("change", changeDate1);

radios.forEach(function(rad){
  rad.addEventListener("click", radioCheck);
});



function validateSignUpKeyup(evt) {
  var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  var nameFilter = /^([^0-9]*)$/;
    
  // First name can't be blank
  if (first == "") {
    first.classList.add("error");
    firstID.textContent = "Can't be blank";
    evt.preventDefault();
  } else if (!nameFilter.test(first)) {   // First name can't be a number
    first.classList.add("error");
    firstid.textContent = "Can't have numbers";
    evt.preventDefault();            
  } else if (first.length > 50) {  // First name can't be longer than 50 characters
    first.classList.add("error");
    firstid.textContent = "Name is too long";
    evt.preventDefault();            
  } else {   // First name no error
    first.classList.remove("error");
    firstid.textContent = "";
  }
}

function radioCheck(){}

function changeDate1(){}
/* No need for valid and invalid classes. Set "valid" style as
   the default and then apply or remove the "invalid" class as needed. 

   Either way, you've got to make your selectors more specific than the 
   default Bootstrap ones, otherwise they will not override Bootstrap.
   
   Adding the element type and the Bootstrap class along with your class
   usually does the trick.
*/
input.form-control { border: 2px solid green; }
    
input.form-control.error {
 border: 2px solid red;
}

body {
        background-image: url(../../Icons/violin.jpeg);
        background-repeat: no-repeat;
        background-position: center absolute;
    }
    
    @media only screen and (min-width: 768px) {
        #box {
            margin-top: 60px;
            margin-bottom: 20px;
        }
    }
    
    @media only screen and (min-width: 768px) {
        body {
            background-size: cover;
        }
    }
    
    #box {
        border-radius: 5px;
        background: white;
    }
    
    .blue-button {
        background-color: #00b4ff;
        color: #fff;
        margin-top: 2.8%;
        margin-bottom: 2.5%;
        width: 100%;
    }
    
    #logo {
        margin-top: 20px;
    }
    
    h1 {
        font-size: 1em;
        font-weight: normal;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    #individual {
        display: block;
    }
    
    #parent {
        display: none;
    }
    
    #small {
        font-size: 0.8em;
    }
    
    .month-space {
        margin-right: 0.9em;
    }
    
    .day-space {
        margin-right: 0.9em;
    }
    
    .year-space {
        margin-right: 0.9em;
    }
    
    .radio {
        margin-bottom: 15px;
    }
<!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous">
    
<!--- Include CSS -->
<link rel="stylesheet" href="Student-Sign-Up.css" type="text/css" />
    
<div class="container">
   <div class="row">
      <div class="col-md-5 mx-auto" id="box">
         <!-- Logo and Sign Up Text -->
         <div class="text-center">
           <a href="#">
             <img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
           </a>
           <h1>Signing up as</h1>
         </div>
    
         <!-- Radio check 1 -->
         <div class="form-check form-check-inline radio">
           <label class="form-check-label">
               <input class="form-check-input" type="radio" name="radios" id="radio1" checked>                         Individual
           </label>
         </div>
    
         <!-- Radio check 2 -->
         <div class="form-check form-check-inline radio">
           <label class="form-check-label">
             <input class="form-check-input" type="radio" name="radios" id="radio2"> Parent of a child
           </label>
         </div>
    
         <!-- Individual Form -->
         <form id="individual" action="#" method="POST" autocomplete="off">
    
           <!-- Individual First Name -->
           <div class="form-group">
              <span id="firstid" class="text-warning"></span>
              <input class="form-control" id="first" name="first" type="text" placeholder="First name">
           </div>
    
           <!-- Individual Last Name -->
           <div class="form-group">
             <span id="lastid" class="text-warning"></span>
             <input class="form-control" id="last" name="last" type="text" placeholder="Last name">
           </div>
    
           <!-- Individual Email -->
           <div class="form-group">
             <span id="email1id" class="text-warning"></span>
             <input class="form-control email" id="email1" name="email" type="text" placeholder="Email">
           </div>
    
           <!-- Individual Password -->
           <div class="form-group">
             <span id="password1id" class="text-warning"></span>
             <input class="form-control" id="password1" name="password" type="password" placeholder="Password" >
           </div>
    
           <!-- Individual's Birthday -->
           <div class="form-group">
             <label>Birthday</label>
             <div class="form-inline">
             <!-- Month -->
             <select id="month1" name="month" class="form-control month-space">
               <!-- Give any <option> that doesn't count as a valid choice a value of "".
                    This makes is simple to test for. Also, don't bother giving the valid
                    options values that are essentially nothing more than indexes because
                    you can get that number anyway with var selectedIndex = month1.selectedIndex; -->
               <option value="">Month</option>
               <option>January</option>
               <option>February</option>
               <option>March</option>
               <option>April</option>
               <option>May</option>
               <option>June</option>
               <option>July</option>
               <option>August</option>
               <option>September</option>
               <option>October</option>
               <option>November</option>
               <option>December</option>
             </select>
    
             <!-- Day -->
             <select name="day" id="day1" class="form-control day-space">
               <option value="">Day</option>
             </select>
    
             <!-- Year -->
             <select name="year" id="year1" class="form-control year-space">
               <option value="">Year</option>
             </select>
    
             <span id="date1id" class="text-warning"></span>
           </div>
         </div>
    
         <button type="submit" name="submit" class="btn blue-button">Confirm</button>
    
       </form>
    
       <!-- Parent Form -->
       <form id="parent" class="hidden" action="#" method="POST"  autocomplete="off">
    
         <!-- Parent's First Name -->
         <div class="form-group">
            <span id="parent-firstid" class="text-warning"></span>
            <input class="form-control" id="parent-first" name="parent-first" type="text" placeholder="Parent's first name"/>
                        </div>
    
                        <!-- Parent's Last Name -->
                        <div class="form-group">
                            <span id="parent-lastid" class="text-warning"></span>
                            <input class="form-control" id="parent-last" name="parent-last" type="text" placeholder="Parent's last name" />
                        </div>
    
                        <!-- Parent Email -->
                        <div class="form-group">
                            <span id="email2id" class="text-warning"></span>
                            <input class="form-control" id="email2" name="email" type="text" placeholder="Email" />
                        </div>
    
                        <!-- Parent Password -->
                        <div class="form-group">
                            <span id="password2id" class="text-warning"></span>
                            <input class="form-control" id="password2" name="password" type="password" placeholder="Password" />
                        </div>
    
                        <!-- Child's First Name -->
                        <div class="form-group">
                            <span id="child-firstid" class="text-warning"></span>
                            <input class="form-control" id="child-first" name="child-first" type="text" placeholder="Child's first name" />
                        </div>
    
                        <!-- Child's Birthday -->
                        <div class="form-group">
                            <label>Child's birthday</label>
                            <div class="form-inline">
                                <!-- Month -->
                                <select id="month2" name="month" onChange="changeDate2(this.options[selectedIndex].value);" class="form-control month-space">
                                    <option value="na">Month</option>
                                    <option value="1">January</option>
                                    <option value="2">February</option>
                                    <option value="3">March</option>
                                    <option value="4">April</option>
                                    <option value="5">May</option>
                                    <option value="6">June</option>
                                    <option value="7">July</option>
                                    <option value="8">August</option>
                                    <option value="9">September</option>
                                    <option value="10">October</option>
                                    <option value="11">November</option>
                                    <option value="12">December</option>
                                </select>
    
                                <!-- Day -->
                                <select name="day" id="day2" class="form-control day-space">
                                    <option value="na">Day</option>
                                </select>
    
                                <!-- Year -->
                                <select name="year" id="year2" class="form-control year-space">
                                    <option value="na">Year</option>
                                </select>
    
                                <span id="date2id" class="text-warning"></span>
                            </div>
                        </div>
    
                        <button type="submit" name="submit" class="btn blue-button">Confirm</button>
                    </form>
    
                    <p class="text-center" id="small">By signing up you agree to our
                        <a href="#">Terms of Use</a> and
                        <a href="#">Privacy Policy</a>
                    </p>
                </div>
            </div>
        </div>
    
        <!-- Date Script -->
        <script src="Date.js"></script>
    
        <!-- Form Validation Scripts -->
        <script src="Validate-Form.js"></script>
        <script src="Validate-Form-Keyup.js"></script>
    
        <!-- Radio Check Script -->
        <script src="Radio-Check.js"></script>
    
        <!--- Bootstrap Scripts -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

Change text input border color, So you want to change 2 propeties: Border-width and border-color It won't harm your code to use the whole shorthand property of border. This SO post seems to be similar:changing textbox border colour using javascript. color: Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is black: transparent: The color of the border is transparent (underlying content will shine through) initial: Sets this property to its default value. Read about initial: inherit: Inherits this property from its parent element.

the problem is that after ones you type a value currect he have a no-error class and will be green even if you will ad to it an error class after. if you can see, if you write from the first time only numbers (-incorrect filed) it will turn red. it will stay green only after it get a non-error class once. so what you have to do is remove the non-error class. it can be done easily with jquery:

    // First name can't be blank
    if (first == "") {
        $("#first").removeClass("no-error");
        $("#first").addClass("error");
        // document.getElementById("first").className = document.getElementById("first").className + " error";
        document.getElementById("firstid").innerHTML = "Can't be blank";
    }

    // First name can't be a number
    else if (!nameFilter.test(first)) {
        $("#first").removeClass("no-error");
        $("#first").addClass("error");
        // document.getElementById("first").className = document.getElementById("first").className + " error";
        document.getElementById("firstid").innerHTML = "Can't have numbers";
    }

    // First name can't be longer than 50 characters
    else if (first.length > 50) {
        $("#first").removeClass("no-error");
        $("#first").addClass("error");
        // document.getElementById("first").className = document.getElementById("first").className + " error";
        document.getElementById("firstid").innerHTML = "Name is too long";
    }

    // First name no error
    else {
        $("#first").removeClass("error");
        $("#first").addClass("no-error");
        // document.getElementById("first").className = document.getElementById("first").className + " no-error";
        document.getElementById("firstid").innerHTML = "";
    }

hope its help :)

with no jquery use this:

        if (document.getElementById("first").className.replace("no-error", "error") == -1) {
            document.getElementById("first").className = document.getElementById("first").className + " error";
        }

borderColor style property JavaScript, Default: transparent. If only one color value is set, it is used for all four borders. If two color values  Hi, I want to change Div Border color in Javascript. Pl let me know the scripts. Thanks in advance.

CSS Solution:

Just add border-color and box-shadow to your classes and as you are adding the respective classes to your form as validation,

This solution will work as expected.

.error{
  border-color: red !important;
  box-shadow: rgba(255,0,0,0.4) 0 0 0 0.2em !important; 
}

function validateSignUpKeyup() {
  var first = document.getElementById("first").value;
  var last = document.getElementById("last").value;
  var email1 = document.getElementById("email1").value;
  var password1 = document.getElementById("password1").value;
  var parentFirst = document.getElementById("parent-first").value;
  var parentLast = document.getElementById("parent-last").value;
  var childFirst = document.getElementById("child-first").value;
  var email2 = document.getElementById("email2").value;
  var password2 = document.getElementById("password2").value;
  var month1 = document.getElementById("month1").value;
  var day1 = document.getElementById("day1").value;
  var year1 = document.getElementById("year1").value;
  var month2 = document.getElementById("month2").value;
  var day2 = document.getElementById("day2").value;
  var year2 = document.getElementById("year2").value;
  var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  var nameFilter = /^([^0-9]*)$/;

  // First name can't be blank
  if (first == "") {
    document.getElementById("first").className = document.getElementById("first").className + " error";
    document.getElementById("firstid").innerHTML = "Can't be blank";
  }

  // First name can't be a number
  else if (!nameFilter.test(first)) {
    document.getElementById("first").className = document.getElementById("first").className + " error";
    document.getElementById("firstid").innerHTML = "Can't have numbers";
  }

  // First name can't be longer than 50 characters
  else if (first.length > 50) {
    document.getElementById("first").className = document.getElementById("first").className + " error";
    document.getElementById("firstid").innerHTML = "Name is too long";
  }

  // First name no error
  else {
    document.getElementById("first").className = document.getElementById("first").className + " no-error";
    document.getElementById("firstid").innerHTML = "";
  }
}
body {
  background-image: url(../../Icons/violin.jpeg);
  background-repeat: no-repeat;
  background-position: center absolute;
}

@media only screen and (min-width: 768px) {
  #box {
    margin-top: 60px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 768px) {
  body {
    background-size: cover;
  }
}

#box {
  border-radius: 5px;
  background: white;
}

.blue-button {
  background-color: #00b4ff;
  color: #fff;
  margin-top: 2.8%;
  margin-bottom: 2.5%;
  width: 100%;
}

#logo {
  margin-top: 20px;
}

h1 {
  font-size: 1em;
  font-weight: normal;
  margin-top: 15px;
  margin-bottom: 15px;
}

#individual {
  display: block;
}

#parent {
  display: none;
}

#small {
  font-size: 0.8em;
}

.month-space {
  margin-right: 0.9em;
}

.day-space {
  margin-right: 0.9em;
}

.year-space {
  margin-right: 0.9em;
}

.radio {
  margin-bottom: 15px;
}

.error {
  border-color: red !important;
  box-shadow: rgba(255, 0, 0, 0.4) 0 0 0 0.2em !important;
}

.no-error:focus {
  border-color: green !important;
  box-shadow: rgba(0, 255, 0, 0.4) 0 0 0 0.2em !important;
}
<head>
  <!-- Meta tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Page description">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!--- Include CSS -->
  <link rel="stylesheet" href="Student-Sign-Up.css" type="text/css" />

  <title>Music Lessons with Online Teachers - Muebie</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-5 mx-auto" id="box">

        <!-- Logo and Sign Up Text -->
        <div class="text-center">
          <a href="#">
            <img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
          </a>
          <h1>Signing up as</h1>
        </div>

        <!-- Radio check 1 -->
        <div class="form-check form-check-inline radio">
          <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked> Individual
                    </label>
        </div>

        <!-- Radio check 2 -->
        <div class="form-check form-check-inline radio">
          <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"> Parent of a child
                    </label>
        </div>

        <!-- Individual Form -->
        <form id="individual" action="#" method="POST" autocomplete="off">

          <!-- Individual First Name -->
          <div class="form-group">
            <span id="firstid" class="text-warning"></span>
            <input class="form-control" id="first" name="first" type="text" placeholder="First name" onkeyup="validateSignUpKeyup()" />
          </div>

          <!-- Individual Last Name -->
          <div class="form-group">
            <span id="lastid" class="text-warning"></span>
            <input class="form-control" id="last" name="last" type="text" placeholder="Last name" />
          </div>

          <!-- Individual Email -->
          <div class="form-group">
            <span id="email1id" class="text-warning"></span>
            <input class="form-control email" id="email1" name="email" type="text" placeholder="Email" />
          </div>

          <!-- Individual Password -->
          <div class="form-group">
            <span id="password1id" class="text-warning"></span>
            <input class="form-control" id="password1" name="password" type="password" placeholder="Password" />
          </div>

          <!-- Individual's Birthday -->
          <div class="form-group">
            <label>Birthday</label>
            <div class="form-inline">
              <!-- Month -->
              <select id="month1" name="month" onChange="changeDate1(this.options[selectedIndex].value);" class="form-control month-space">
                <option value="na">Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
              </select>

              <!-- Day -->
              <select name="day" id="day1" class="form-control day-space">
                <option value="na">Day</option>
              </select>

              <!-- Year -->
              <select name="year" id="year1" class="form-control year-space">
                <option value="na">Year</option>
              </select>

              <span id="date1id" class="text-warning"></span>
            </div>
          </div>

          <button type="submit" name="submit" class="btn blue-button">Confirm</button>

        </form>

        <!-- Parent Form -->
        <form id="parent" class="hidden" action="#" method="POST" onsubmit="return validateStudentSignUpForm()" autocomplete="off">

          <!-- Parent's First Name -->
          <div class="form-group">
            <span id="parent-firstid" class="text-warning"></span>
            <input class="form-control" id="parent-first" name="parent-first" type="text" placeholder="Parent's first name" />
          </div>

          <!-- Parent's Last Name -->
          <div class="form-group">
            <span id="parent-lastid" class="text-warning"></span>
            <input class="form-control" id="parent-last" name="parent-last" type="text" placeholder="Parent's last name" />
          </div>

          <!-- Parent Email -->
          <div class="form-group">
            <span id="email2id" class="text-warning"></span>
            <input class="form-control" id="email2" name="email" type="text" placeholder="Email" />
          </div>

          <!-- Parent Password -->
          <div class="form-group">
            <span id="password2id" class="text-warning"></span>
            <input class="form-control" id="password2" name="password" type="password" placeholder="Password" />
          </div>

          <!-- Child's First Name -->
          <div class="form-group">
            <span id="child-firstid" class="text-warning"></span>
            <input class="form-control" id="child-first" name="child-first" type="text" placeholder="Child's first name" />
          </div>

          <!-- Child's Birthday -->
          <div class="form-group">
            <label>Child's birthday</label>
            <div class="form-inline">
              <!-- Month -->
              <select id="month2" name="month" onChange="changeDate2(this.options[selectedIndex].value);" class="form-control month-space">
                <option value="na">Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
              </select>

              <!-- Day -->
              <select name="day" id="day2" class="form-control day-space">
                <option value="na">Day</option>
              </select>

              <!-- Year -->
              <select name="year" id="year2" class="form-control year-space">
                <option value="na">Year</option>
              </select>

              <span id="date2id" class="text-warning"></span>
            </div>
          </div>

          <button type="submit" name="submit" class="btn blue-button">Confirm</button>
        </form>

        <p class="text-center" id="small">By signing up you agree to our
          <a href="#">Terms of Use</a> and
          <a href="#">Privacy Policy</a>
        </p>
      </div>
    </div>
  </div>

  <!-- Date Script -->
  <script src="Date.js"></script>

  <!-- Form Validation Scripts -->
  <script src="Validate-Form.js"></script>
  <script src="Validate-Form-Keyup.js"></script>

  <!-- Radio Check Script -->
  <script src="Radio-Check.js"></script>

  <!--- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

HTML DOM Style borderColor Property, The borderColor property sets or gets the an element's border's color. This property can take from one to four values: border-color:red green blue pink;. is equal to. Changing the border color after the button is clicked. This would be done through the javascript I think, unless if you can do it through the CSS, but I'm not entirely sure. Yea, I think I'm right when I say the javascript. Example Code:But I don't want it to change to a hundred different colors, only once after it's clicked.

Borders, The use of color is a fundamental form of human expression. This outline is different from the border in that it doesn't get space set aside for it in the and changing color using JavaScript code to alter the styles of elements. It only happens on Chrome in order to tell that the input box is active. That is the default behavior of Google Chrome, but if you want to remove it to have clear fields in your forms you can do it with the help of CSS properties. We will show the steps below. Create HTML¶ Create a <form> to add HTML forms to the web page for user input.

Applying color to HTML elements using CSS, What does 'Space Complexity' mean? Pseudo-polynomial Algorithms · Polynomial Time Approximation Scheme · A Time Complexity Question · Searching  The border property sets or returns up to three separate border properties, in a shorthand form. With this property, you can set/return one or more of the following (in any order): border-width; border-style; border-color

HTML, When the input is filled, we want to change its border-color to green. If a user enters a whitespace into the field, the input doesn't get validated. In Learn JavaScript's autocomplete component, I taught students how to  One of my favorite techniques, with web pages, is to set the background color of the control, rather than the border. It is very visible and you can choose a more muted color and still have impact. In that case, it is very easy to set background back to white, which is the default.

Comments
  • have you tried using !important?
  • Yes. It just makes whatever border that has that property remain on, doesn't let the other one ever appear, so not a solution. Having it on both just make sit apply to the last border property called, so still not a solution.
  • can you add the working code snippet to get an Idea what you are trying to achieve.
  • Why does the error regarding querySelectorAll for radio appear
  • Thanks for your help, but I'm not using jQuery for this project. How would it be done in vanialla javascript?
  • i add an option with noo javascript in the end of my answer. just use .className.replace("no-error","error") as shown in the answer.
  • it will work like this, because the lest class will override the previous classes, but its better to remove the previous classes rather then have a div with class .error no-error error no-error error no-error.. and so on...
  • Exactly by toggle class. Jquery solution is good as well.