Question

我写了一个简单的脚本来检查提交后的表格数据。但是，如果输入为空，则不应继续发送。为什么它不起作用？

          <script src="scripts/formvalidate.js"></script>
          <h3 id="required">Contact Me</h3>
          <form name="form" onsubmit="return formValidate()" method="POST">
            <label for="name">Name<span id="asterisk" id="label"></span></label>
            <input type="text" id="name" name="name">
            <label for="email">Email<span id="asterisk" id="label"></span></label>
            <input type="email" id="email" name="email">
            <label for="subject">Subject<span id="asterisk" id="label"></span></label>
            <input type="text" id="subject" name="subject">
            <label for="message">Message<span id="asterisk" id="label"></span></label>
            <textarea name="message" id="message"></textarea>
            <button type="submit" id="submit">Submit</button>
          </form>

function formValidate() {
    var form = document.forms["form"];
    var name = form.elements["name"].value;
    var email = form.elements["email"].value;
    var subject = form.elements["subject"].value;
    var message = form.elements["message"].value;
    var result = false;
    var output = "*";
    var required = "Required";
    var asterisk = "* ";
    if (name == "" || email == "" || subject == "" || message == "") {
        document.getElementById("label").innerHTML = output;
        document.getElementById("asterisk").innerHTML = asterisk;
        document.getElementById("required").innerHTML = required;
        alert('Please fill out all fields');
        return false;
    }
    else {
        alert('Thanks for contacting me');
        result = true;
    }
    return result;
}

Answer 1

您不能使用具有相同ID的多个元素，因为ID应该可以唯一地标识页面中的一个元素（HTML5 Specification说：ID必须在文档范围内是唯一的）），请尝试使用类，然后将您的 getElementById（） 更改为 getElementsByClassName（） 它应该可以正常工作：

function formValidate() {
    var form = document.forms["form"];
    var name = form.elements["name"].value;
    var email = form.elements["email"].value;
    var subject = form.elements["subject"].value;
    var message = form.elements["message"].value;
    var output = "*";
    var required = "Required";
    var asterisk = "* ";
    if (name == "" || email == "" || subject == "" || message == "") {
        document.getElementsByClassName("label").innerHTML = output;  //notice how I changed the function used here
        document.getElementById("asterisk").innerHTML = asterisk;
        document.getElementById("required").innerHTML = required;
        alert('Please fill out all fields');
        return false;
    }
    else {
        alert('Thanks for contacting me');
        return true;
    }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="formvalidate.js"></script>
    <title></title>
  </head>
  <body>
          <h3 id="required">Contact Me</h3>
          <form name="form" onsubmit="return formValidate()" method="POST">
            <label for="name">Name<span id="asterisk" class="label"></span></label>
            <input type="text" id="name" name="name">
            <label for="email">Email<span id="asterisk" class="label"></span></label>
            <input type="email" id="email" name="email">
            <label for="subject">Subject<span id="asterisk" class="label"></span></label>
            <input type="text" id="subject" name="subject">
            <label for="message">Message<span id="asterisk" class="label"></span></label>
            <textarea name="message" id="message"></textarea>
            <button type="submit" id="submit">Submit</button>
          </form>
  </body>
</html>

请注意，您尝试插入的星号仅出于相同的原因插入到一个输入中（对于DOM，多个ID毫无意义）。当DOM试图解决此问题时，它只会获得具有给定ID 的文档上的第一个元素（要解决此问题，只需将 id =“ asterisk” 类型更改为 class =“星号” 类型）。

绘制扭曲：可能没有看到任何错误屏幕的原因是（我想）您正在chrome上对其进行测试，该错误仅显示了毫秒。我个人建议是将firefox用于测试目的，因为它根本不会隐藏任何错误。

表单验证未正确响应

1 个答案: