个人中心
gpt4 book ai didi

javascript - 当字段留空时如何将星号变成红色？

转载 作者：行者123 更新时间：2023-12-03 03:32:38 25 4
gpt4 key购买 nike

我正在尝试迭代一个包含四个元素的简单表单，并且只有三个元素是必需的。当必填元素留空时，如何将星号变成红色？

这是不起作用的代码，我不确定如何使其工作。 

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8" />
      <style type='text/css'>

      </style>
   </head>
   <body>
        <form method="post" action="" id="myForm">
          <div id="validation"></div>
          <p><span class="asterisk">*</span> required</p>
          <p><span class="asterisk">*</span> <label>First Name:<br><input type="text" name="firstName"></label></p>
          <p><label>Last Name:<br><input type="text" name="lastName"></label></p>
          <p><span class="asterisk">*</span> <label>Email:<br><input type="email" name="email"></label></p>
          <p><span class="asterisk">*</span> <label>Gender:<br><input type="radio" name="gender" value="male">Male
            <input type="radio" name="gender" value="female">Female</label></p>
          <p><input type="submit" value="Submit"></p>
        </form>

        <script>

            var formy = document.getElementById('myForm'); 

            var required_inputs = ['firstName', 'email', 'gender']; 
            formy.onsubmit = function(event) {
              for (var i = 0; i < required_inputs.length; i++) {
                var input = this[required_inputs[i]];
                if (input.value.length == 0) {
                  event.preventDefault(); 
                  document.getElementsByClassName('asterisk').color('#FFCCC');
                }
              }
            }
         </script>
   </body>
</html>

最佳答案

在您的代码中替换 document.getElementsByClassName('asterisk').color('#FFCCC');与

var ele = document.getElementsByClassName('asterisk');
for (var j = 0; j < ele.length; i++ ) {
    ele[j].style.color = "red";
}

或单行( Array.From ):

Array.from(document.querySelectorAll(".asterisk"), e => e.style.color = "red");

更新的代码:

<form method="post" action="" id="myForm">
    <div id="validation"></div>
    <p><span class="asterisk">*</span> required</p>
    <p><span class="asterisk">*</span> <label>First Name:<br><input type="text" name="firstName"></label></p>
    <p><label>Last Name:<br><input type="text" name="lastName"></label></p>
    <p><span class="asterisk">*</span> <label>Email:<br><input type="email" name="email"></label></p>
    <p><span class="asterisk">*</span> <label>Gender:<br><input type="radio" name="gender" value="male" class="gender">Male
    <input type="radio" name="gender" value="female" class="gender">Female</label></p>
    <span id="error" style="display:none;color:red;">Gender is required</span>
    <p><input type="submit" value="Submit"></p>
</form>

<script>
    var formy = document.getElementById('myForm');

    var required_inputs = ['firstName', 'email', 'gender'];
    formy.onsubmit = function (event) {
        event.preventDefault();
        document.getElementById("error").style.display = "none";

        for (var i = 0; i < required_inputs.length; i++) {
            var input = this[required_inputs[i]];

            if (input.tagName != undefined) { //input text fields
                input.style.removeProperty('border');
                if (input.value.length == 0) {
                    input.style.borderColor = "red";

                    var ele = document.getElementsByClassName('asterisk');
                    for (var j = 0; j < ele.length; j++) {
                        ele[j].style.color = "red";
                    }
                }
            }
            else { //for radio button
                var el = document.getElementsByClassName(required_inputs[i]);
                var checked = false;
                for (var j = 0; j < el.length; j++) {
                    if (el[j].checked) checked = true;
                }
                if (!checked)
                {
                    document.getElementById("error").style.display = "block";

                    var ele = document.getElementsByClassName('asterisk');
                    for (var j = 0; j < ele.length; j++) {
                        ele[j].style.color = "red";
                    }
                }    
            }
        }
    }
</script>

关于javascript - 当字段留空时如何将星号变成红色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46019927/

25 4 0
文章推荐： javascript - 将 chrome.tabcapture.capture 转换为音频文件？
文章推荐： groovy - 在Gradle子项目中找不到属性
文章推荐： flutter - 有没有办法在全屏模式下以抖动的方式播放视频？
文章推荐： javascript - React 使用 for 循环在每个 div 中追加 5 个项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com