Question

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

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

<!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>

Answer 1

在您的代码中将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>

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

1 个答案: