Question

人。

我希望您不要将此视为一个愚蠢的问题，因为我不熟悉JavaScript。我对如何解决这个问题进行了研究，但我在堆栈溢出时发现的答案现在对我来说太高了。我也不想复制代码。我想学习它。我的JavaScript代码在一个字段上工作，但即使我做了一个循环，它也不适用于所有字段。

请你可以自由地告诉我如何以专业的方式做这件事。我将很高兴看到许多方法或方法。格拉西亚斯

＆＃13;

function Validate(x){
    var required = document.getElementsByClassName("required");
    for(var x = 0; x > required.length; x++){
    if ((required[x].value == "") || (required[x].value == null)) {
        required[x].style.backgroundColor = "red";
        required[x].style.color = "white";
    } else {
        required[x].style.backgroundColor = "";
        required[x].style.color = "#777";
        }
    }
}

＆＃13;

<form id="form1" name="form1" method="post" action="">
<p>
 <label for="textfield">Name</label><br />
  <input type="text" name="name" id="name" class="forme required"  onblur="Validate(name)"  />
   <br />

  <label for="textfield">Surname</label><br />
  <input type="text" name="surname" id="surname" class="forme required" />
   <br />

  <label for="textfield"> School</label><br />
  <input type="text" name="school" id="school" class="forme required" />
   <br />

  <label for="textfield">Mobile</label><br />
  <input type="text" name="mobile" id="mobile" class="forme required" />
   <br />

  <label for="email"> Email</label><br />
  <input type="text" name="email" id="email" class="forme required"/>
  </p>
  <p>
    <input type="reset" name="reset" id="reset" value="Reset" />
    <input type="submit" onclick="Validate()" name="submit" id="submit" value="Submit" />
  </p>
</form>

＆＃13;

感激你的时间。

Answer 1

如您问题的评论中所述，您使用了错误的符号（“＆gt;”ist false，“＆lt;”为true）。但是你的代码还有一些失败。

for元素上的label属性应始终指向相应的输入字段，因此请使用输入字段的ID。
最好使用JavaScript addEventListener方法而不是DHTML属性onclick，但这可能只是一种品味问题。

document.getElementById("submit").addEventListener("click", function(event){
    var req     = document.querySelectorAll("form input.required"),
        error   = false;
        
    for(var i = 0; i < req.length; i++){
        if(req[i].value.trim() == ""){
            if(!error){
                error = true;
            }
            req[i].style.setProperty("color", "#ffffff");
            req[i].style.setProperty("background-color", "#ff0000");
        } else {
            req[i].style.removeProperty("color");
            req[i].style.removeProperty("background-color");
        }
    }
    
    if(error){
        // Prevent Form Submit
        event.preventDefault();
    }
});

<form id="form1" name="form1" method="post" action="">
    <p>
        <label for="name">Name</label><br />
        <input type="text" id="name" name="name" class="forme required" />
    </p>

    <p>
        <label for="surname">Surame</label><br />
        <input type="text" id="surname" name="surname" class="forme required" />
    </p>

    <p>
        <label for="school"> School</label><br />
        <input type="text" id="school" name="school" class="forme required" />
    </p>

    <p>
        <label for="mobile">Mobile</label><br />
        <input type="tel" id="mobile" name="mobile" class="forme required" />
    </p>

    <p>
        <label for="email"> Email</label><br />
        <input type="email" id="email" name="email" class="forme required" />
    </p>

    <p>
        <input type="reset" id="reset" name="reset" value="Reset" />
        <input type="submit" id="submit" name="submit" value="Submit" />
    </p>
</form>

请注意：不要仅使用JavaScript来验证您的表单字段。您应该始终检查服务器端传递的用户信息，因为您无法控制用户。

玩得开心学习JavaScript。

此致
萨姆。

使用javascript

1 个答案: