为什么这不会改变边框的颜色

Why does this not change the color of the border

本文关键字：边框 颜色 改变 为什么      更新时间：2023-09-26

我正在制作一个表单验证器，我希望它在输入字段为null时改变每个div周围的边框颜色。

它只在我为第一个div "fname"指定样式时起作用。但是，当我在样式部分将其更改为div时，以便将默认样式应用于所有元素，由于某种原因，即使输入字段为空，表单也会发送数据。如何防止表单提交并使每个div周围出现红色边框?谢谢!

<!DOCTYPE html>
 <html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Form Validation</title>
     <meta name="description" content="DESCRIPTION">
     <link rel="stylesheet" href="PATH">
     <style>
        div {
            border:thick solid white;
        }
     </style>
     <script>
     function validateForm() {
         var fname = document.forms["myForm"]["fname"].value;
         var email = document.forms["myForm"]["email"].value;
         var message = document.forms["myForm"]["message"].value;
         var discussWhat = document.forms["myForm"]["discussWhat"].value;
         var pickOne = document.forms["myForm"]["pickOne"].value;
         var selectSome = document.forms["myForm"]["selectSome"].value;
         if (fname == null || fname == "") {
             alert("Name must be filled out");
             document.getElementById("fname").style.borderColor = "red";
             return false;
         } else if (email == null || email == "") {
             alert("Email must be filled out");
             document.getElementById("email").style.borderColor = "red";
             return false;
         } else if (message == null || message == "") {
             alert("Message must be filled out");
             document.getElementById("message").style.borderColor = "red";
             return false;
         } else if (discussWhat == null) {
             alert("Selec what you want to discuss");
             document.getElementById("discussWhat").style.borderColor = "red";
             return false;
         } else if (pickOne == null) {
             alert("Pick one option");
             document.getElementById("pickOne").style.borderColor = "red";
             return false;
         } else if (selectSome == null) {
             alert("Select some options");
             document.getElementById("selectSome").style.borderColor = "red";          
             return false;
         }
     }
     </script>
     <!--[if lt IE 9]>
       <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 </head>
 <body>
     <form method="post" name="myForm" action="mailer.php" onsubmit="return validateForm()">
         <fieldset>
            <div id="v">
                 <label>Name: </label>
                 <input type="text" name="fname"><br>
            </div>
            <div id="email">
                 <label>E-mail: </label>
                 <input type="text" name="email" ><br>
            </div>
            <div id="message">
                 <label>Message: </label>
                 <textarea name="message" ></textarea><br>
            </div>
            <div id="discussWhat">
                 <label>What would you like to discuss? </label><br>
                 <select name="discussWhat" >
                     <option>Technical Support</option>
                     <option>Billing</option>
                     <option>Sales</option>
                     <option>Other</option>
                </select><br>
            </div>
            <div id="pickOne">
                 <label>Pick one: </label><br>
                 <input type="radio" name="pickOne" value="option1">Option 1
                 <input type="radio" name="pickOne" value="option2">Option 2<br>
            </div>
            <div id="selectSome">
                 <label>Select all that apply: </label>
                 <input type = "checkbox" name="selectSome" value="FirstCheckbox"><label>First Checkbox</label>
                 <input type = "checkbox" name="selectSome" value="SecondCheckbox"><label>Second Checkbox</label>
                 <input type = "checkbox" name="selectSome" value="ThirdCheckbox"><label>Third Checkbox</label>4
            </div>
        </fieldset>
        <input type="submit" value="Submit">
     </form>
 </body>
 </html>

fname input字段的Id为"v"，但函数使用的是"fname" id，在表格中不存在。

仅使用css可以获得很长的路要走，也建议将电子邮件类型从text更改为email

你也可以让浏览器跳过并为你处理验证/样式，只要你在属性

上设置所需的要求

:required:invalid {
  border-color: #C00000;
  color: red;
}
:required:invalid ~ label {
  border-color: #C00000;
  color: red;
}
<form method="post" name="myForm" action="mailer.php" onsubmit="return validateForm()">
  <fieldset>
    <div id="v">
      <label>Name:</label>
      <input type="text" name="fname" required>
      <br>
    </div>
    <div id="email">
      <label>E-mail:</label>
      <input type="email" name="email" required>
      <br>
    </div>
    <div id="message">
      <label>Message:</label>
      <textarea name="message" required></textarea>
      <br>
    </div>
    <div id="discussWhat">
      <label>What would you like to discuss?</label>
      <br>
      <select name="discussWhat" required>
        <option disabled selected value>-- select an option --</option>
        <option>Technical Support</option>
        <option>Billing</option>
        <option>Sales</option>
        <option>Other</option>
      </select>
      <br>
    </div>
    <div id="pickOne">
      <label>Pick one:</label>
      <br>
      <input type="radio" name="pickOne" value="option1" required>
      <label>Option 1</label>
      <input type="radio" name="pickOne" value="option2" required>
      <label>Option 2</label>
      <br>
    </div>
    <div id="selectSome">
      <label>Select all that apply:</label>
      <input type="checkbox" name="selectSome" value="FirstCheckbox">
      <label>First Checkbox</label>
      <input type="checkbox" name="selectSome" value="SecondCheckbox">
      <label>Second Checkbox</label>
      <input type="checkbox" name="selectSome" value="ThirdCheckbox">
      <label>Third Checkbox</label>4
    </div>
  </fieldset>
  <input type="submit" value="Submit">
</form>

相关文章：