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

Question

我正在使用表单验证器，当输入字段为null时，我希望它更改每个div周围边框的颜色。

仅当我为fir div“ fname”指定样式时才有效。 但是，当我在样式部分将其更改为div以便将默认样式应用于所有元素时，即使输入字段为null，出于某种原因，表单也会发送数据。 如何防止提交表单并使每个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>

Answer 1

fname input字段的ID为"v" ，但函数使用"fname" id ，该"fname" id不存在。

Answer 2

仅使用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>

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

问题描述

2 个解决方案

解决方案1
1 2016-11-02 15:55:34

解决方案2
0 已采纳 2016-11-02 16:30:12

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

问题描述

2 个解决方案

解决方案1 1 2016-11-02 15:55:34

解决方案2 0 已采纳 2016-11-02 16:30:12

解决方案1
1 2016-11-02 15:55:34

解决方案2
0 已采纳 2016-11-02 16:30:12