Цвет границы в форме JavaScript не переопределяется - PullRequest
Новая
       0

Цвет границы в форме JavaScript не переопределяется

0 голосов
/ 12 мая 2018

Я работаю над сценарием, который проверяет поле ввода onkeyup.Когда параметр проверки не заполнен, я хочу, чтобы цвет рамки был красным, а когда все параметры переданы, я хочу, чтобы он был зеленым.Проблема заключается в том, что как только параметр передается, цвет границы становится зеленым (что и должно быть), однако, как только он не соответствует предыдущему параметру (как, например, у ввода есть числа, когда это не нужно)t) граница остается зеленой и не становится красной (ожидаемый результат).Любая помощь будет принята с благодарностью.Удачных выходных! 

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>

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

Ваши селекторы должны быть более конкретными, чем применяемые селекторы Bootstrap. Подробности смотрите в комментариях CSS.

Затем ваша функция проверки, кажется, никогда ничего не возвращает, поэтому событие submit никогда не будет остановлено, если у вас есть недопустимые данные. Все ваши события обрабатываются в JavaScript с современным кодом, используя .addEventListener(), а не в HTML с атрибутами события. Когда вы используете эту модель, вашей функции обработки событий будет автоматически передан объект события, и этот объект - это то, что вы можете вызвать .preventDefault() для отмены события.

Кроме того, работа с API element.classList намного проще, чем работа со свойством element.className.

Кроме того, используйте .textContent при установке / получении строк, которые не содержат HTML, и используйте .innerHTML только тогда, когда строки содержат HTML (так как .innerHTML заставляет браузер анализировать HTML из строки, которая пустая трата ресурсов, когда их нет). 

// 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>
0 голосов
/ 12 мая 2018

CSS-решение:

Просто добавьте border-color и box-shadow к своим классам и, когда вы добавляете соответствующие классы в форму для проверки,

Это решение будет работать так, как ожидается. 

.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>
0 голосов
/ 12 мая 2018

проблема в том, что после того, как вы введете значение currect, у него будет класс no-error, и он будет зеленым, даже если вы добавите к нему класс error после.если вы видите, если вы пишете с первого раза только цифры (неправильно введено), он станет красным.он останется зеленым только после того, как один раз получит класс без ошибок.так что вам нужно удалить класс non-error.это можно легко сделать с помощью 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 = "";
    }

надеюсь, что это поможет:)

без jquery используйте это: 

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