无法在表单验证 js 脚本中设置属性 'className' of null

Question

我试图在输入不包含“@”的文本时将文本框的边框设为红色（这是一个电子邮件检查器）。不幸的是，这不会发生。

我尝试使用包含新边框颜色的 class，但不幸的是，似乎从未应用此更改。

这是html和js代码：

<!DOCTYPE html>
<html>

<head>
<title>
    Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>

<body>

<script>
    function validateForm() {

            var x = document.forms["myForm"]["fname"].value;
            if (x == "") {
            alert("something must be filled out");
            return false;
            }
            else if (!(x.includes("@"))) 
           {
             alert("you must have to filled value with @");

 document.getElementById("nameT").style.color="red";

 document.getElementById("fname").className = 'error';
             return false;
           }
          }
 </script>

 <div class="ocean">
       <div class="wave"></div>
       <div class="wave"></div>
       </div>
       <h1>
          <center>
             Whale
          </center>
       </h1>
       <div class="loginbox">

         <h2>
           Login
         </h2>
         <form name="myForm" onsubmit="return validateForm()" 
         method="post">
             <p id="nameT"> email </p>
             <input type="text" name="fname" placeholder="enter 
   email" onblur="validateForm()">
              <p name="passT"> password </p>
              <input type="text" name="name" placeholder="enter 
   password">
              <br>
              <input type="submit" value="Submit">
              <br>
              <a href="#"> 
                 Lost your password? 
              </a>
              <br>
              <a href="#"> 
                 Create an account 
              </a>
          </form>
        </div>
    </body>

  </html>

这是 css 代码：

 html, body { height: 100%; }
 body {
   background:radial-gradient(ellipse at center, rgba(255,254,234,1) 
 0%, rgba(255,254,234,1) 35%, #ffffff 100%);
  overflow: hidden;
 }

.ocean { 
  height: 5%;
 width:100%;
 position:absolute;
  bottom:0;
 left:0;
 background: #ffffff;
 }

 .wave {
  background: url(https://s3-us-west- 
  2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) 
 infinite;
  transform: translate3d(0, 0, 0);
  }

.wave:nth-of-type(2) {
 top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s 
  infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
  }

  @keyframes wave {
  0% {
   margin-left: 0;
   }
   100% {
    margin-left: -1600px;
    }
    }

  @keyframes swell {
   0%, 100% {
   transform: translate3d(0,-25px,0);
   }
   50% {
    transform: translate3d(0,5px,0);
   }
  }

  .loginbox
 {
  width: 340px;
  height: 360px;
  background: #000;
  color: #fff;
  top: 50%;
  left:50%;
  position: absolute;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  }
 h2
{
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px; 
}



 .loginbox input
{
 width: 100%;
 margin-bottom: 20px;
}

.loginbox input[type="text"], input[type="password"]
{
 border: none;

 border-bottom: 1px solid #fff;
 background: transparent;
 outline: none;
 height: 40px;
 color: #fff;
 font-size: 16px;
 }

 .loginbox input[type="submit"]
 {
 border: none;
 outline: none;
 height: 48px;
 background: #fb2525;
 color: #fff;
 font-size: 18px;
 border-radius: 20px;
 } 

 .loginbox input[type="submit"]:hover
 {
  cursor: pointer;
  background: #ffc107;
  color: #000;
 }

 .loginbox a
 {
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: darkgrey;
 }

 .loginbox p
 {
   margin: 0;
   padding: 10px;
   font-weight: bold;
  }
  .loginbox a:hover
  {
    color: #ffc107;
  }
    .error{
     border:2px solid red;
     }

如果未在电子邮件文本框中键入“@”符号，则预期的输出是边框变为红色。实际结果不是这样的效果，而是 "cannot set property 'className' of null" 错误。

Answer 1

您正在使用 document.getElementById("fname")，但您没有任何名称为 "fname" 的 id，因此请将输入更新为，

<input type="text" id="fname" name="fname" placeholder="enter 
   email" onblur="validateForm()">

将 getElementById 更改为

document.getElementById("fname").classList.add('error');

并将您的 .error class 更改为

.error{
    border-bottom:2px solid red !important;
}

Answer 2

尝试通过 document.forms 访问元素，如下所示

function validateForm() {

  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("something must be filled out");
    return false;
  } else if (!(x.includes("@"))) {
    alert("you must have to filled value with @");
    document.forms.myForm.name.style.color = "red";
    document.forms.myForm.name.style.border = "1px solid red";
    document.forms.myForm.fname.className = 'error';
    return false;
  } else {
    document.forms.myForm.name.style.color = "#000";
    document.forms.myForm.name.style.border = "1px solid #000";
  }
}

<div class="ocean">
  <div class="wave"></div>
  <div class="wave"></div>
</div>
<h1>
  <center>
    Whale
  </center>
</h1>
<div class="loginbox">

  <h2>
    Login
  </h2>
  <form name="myForm" onsubmit="return validateForm()" method="post">
    <p id="nameT"> email </p>
    <input type="text" name="fname" placeholder="enter 
   email" onblur="validateForm()">
    <p name="passT"> password </p>
    <input type="text" name="name" placeholder="enter 
   password">
    <br>
    <input type="submit" value="Submit">
    <br>
    <a href="#"> 
                 Lost your password? 
              </a>
    <br>
    <a href="#"> 
                 Create an account 
              </a>
  </form>
</div>

Answer 3

只需在您的文本字段中添加 id=fname 并将您的 js 替换为我的 js

<input type="text" id="fname" name="fname" placeholder="enter email" 
 onblur="validateForm()">

这是js

function validateForm() {
            document.getElementById("nameT").style.color = "white";
            var x = document.forms["myForm"]["fname"].value;
            if (x == "") {
            alert("something must be filled out");
            return false;
            } else if (!(x.includes("@"))) {
alert("you must have to filled value with @");
         document.getElementById("nameT").style.color = "red";
         document.getElementById("fname").className = 'error';
         return false;
}
}

here is demo on jsbin

无法在表单验证 js 脚本中设置属性 'className' of null

Cannot set property 'className' of null on form verification js script

javascript

html

css

forms

verification

无法在表单验证 js 脚本中设置 属性 'className' of null

Cannot set property 'className' of null on form verification js script

javascript

html

css

forms

verification

无法在表单验证 js 脚本中设置属性 'className' of null