Question

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

仅当我为第一个div＆＃34; fname＆＃34;指定样式时才有效。但是当我在样式部分将其更改为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>

Answer 1

fname "v"字段的 ID 为"fname" id，但该函数使用{{1}}，表单中不存在。

Answer 2

只有css，您可以获得很长的路要走，还建议您将电子邮件类型从unboxed, ok := output.(*map[string]string) if !ok { return fmt.Errorf("Output should be a pointer of a map") } if unboxed == nil { return fmt.Errorf("Output in NIL") } // if I get here unboxed is a *map[string]string and is not nil更改为text

只要您设置了属性所需的要求，您也可以让浏览器完成并为您处理验证/样式

＆＃13;

email

＆＃13;

:required:invalid {
  border-color: #C00000;
  color: red;
}
:required:invalid ~ label {
  border-color: #C00000;
  color: red;
}

＆＃13;

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

2 个答案: