JavaScript表单中的边框颜色不会覆盖

时间：2018-05-12 15:55:02

标签： javascript html css twitter-bootstrap border

我正在编写一个验证输入字段onkeyup的脚本。每当验证函数的参数未满时，我希望边框颜色为红色，当所有参数都通过时，我希望它为绿色。问题是，一旦参数通过，边框颜色就会变为绿色（它应该这样做），但是，一旦它没有满足前一个参数（就像它输入的数字一样）不应该，边界保持绿色并且不会变成红色（预期结果）。任何帮助将不胜感激。周末打招呼！

＆＃13;
＆＃13; 
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 = "";
  }
}
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

问题是，在你输入一个值当前后，他会有一个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";
        }

答案 1 :(得分：0)

CSS解决方案：

只需将border-color和box-shadow添加到您的课程中，然后将相应的课程添加到表单中作为验证，

此解决方案将按预期工作。

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

＆＃13;
＆＃13; 
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 = "";
  }
}
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题