JavaScript 形式的边框颜色不会覆盖
Border color in JavaScript form doesn't override
我正在编写一个脚本来验证 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>
问题是，在你输入一个正确的值后，他有一个 no-error class 并且即使你给它添加一个 error class 也会是绿色的] 后。如果你能看到，如果你从第一次开始只写数字（-提交不正确）它会变成红色。只有在获得非错误 class 一次后，它才会保持绿色。所以你要做的就是删除 non-error class。使用 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";
}
您的选择器需要比正在应用的 Bootstrap 选择器更具体。有关详细信息，请参阅 CSS 评论。
接下来，您的验证函数似乎从来没有 return 任何东西，因此当您有无效数据时，submit 事件将永远不会停止。使用现代代码 .addEventListener() 在 JavaScript 中处理所有事件，而不是在 HTML 中使用事件属性。当您使用此模型时，您的事件处理函数将自动传递一个事件对象，您可以调用该对象 .preventDefault() 来取消事件。
此外，使用 element.classList API 比使用 element.className 属性.
简单得多
此外，当 setting/getting 字符串不包含任何 HTML 时使用 .textContent，仅当字符串包含 HTML 时才使用 .innerHTML（如.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>
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>
我正在编写一个脚本来验证 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>
问题是，在你输入一个正确的值后，他有一个 no-error class 并且即使你给它添加一个 error class 也会是绿色的] 后。如果你能看到，如果你从第一次开始只写数字（-提交不正确）它会变成红色。只有在获得非错误 class 一次后，它才会保持绿色。所以你要做的就是删除 non-error class。使用 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";
}
您的选择器需要比正在应用的 Bootstrap 选择器更具体。有关详细信息，请参阅 CSS 评论。
接下来，您的验证函数似乎从来没有 return 任何东西，因此当您有无效数据时，submit 事件将永远不会停止。使用现代代码 .addEventListener() 在 JavaScript 中处理所有事件，而不是在 HTML 中使用事件属性。当您使用此模型时，您的事件处理函数将自动传递一个事件对象，您可以调用该对象 .preventDefault() 来取消事件。
此外，使用 element.classList API 比使用 element.className 属性.
此外，当 setting/getting 字符串不包含任何 HTML 时使用 .textContent，仅当字符串包含 HTML 时才使用 .innerHTML（如.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>
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>