Question

我正在尝试使用javascript方法来验证我的表单，但它似乎不起作用。即使提交了空表单，也不会弹出对话框警告我有任何错误。可能是什么错误？（请注意：JS文件有一个为我目前在表单标签中没有使用的时间戳定义的方法。我也需要帮助调用两个函数。）

以下是代码：

function setDate() {
  document.getElementById('date').value = new Date();

}

function validateForm() {
  var a = document.getElementById('name').value;
  var b = document.getElementById("contact1").value;
  var blen = b.length;
  var c = document.getElementById("address1").value;
  var d = document.getElementById("stblimit").value;
  var dlen = d.length;
  var e = document.getElementById("creditlimit").value;
  var f = document.getElementById("commission").value;
  var g = document.getElementById("servicecharges").value;
  //DATE var h = document.forms["addRetailer"]["date"].value;


  if (a == null || a == "") {
    alert("Name must be filled out");
    return false;
  } else if (b == null || b == "" || blen == 0 || blen > 10 || blen < 10) {
    alert("Enter a valid number");
    return false;
  } else if (c == null || c == "") {
    alert("Primary Address must be filled out");
    return false;
  } else if (d == null || d == "" || dlen == 0 || dlen < 0) {
    alert("Set Box Top Limit must be filled with a valid number");
    return false;
  } else if (e == null || e == "") {
    alert("Credit Limit must be filled out");
    return false;
  } else if (f == null || f == "") {
    alert("Commission Percentage must be filled out");
    return false;
  } else if (g == null || g == "") {
    alert("Service Charges must be filled out");
    return false;
  }

}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script src="formvalidation.js" type="text/javascript"></script>
  <title>Register Retailer</title>
</head>

<body>
  <h1>Retailer Information</h1>
  <form name="addRetailer" action="RetailerController" method="post" onsubmit="return validateForm()">

    <table>

      <tr>
        <td>Name</td>
        <td>
          <input type="text" name="name" id="name"></input>
        </td>
      </tr>

      <tr>
        <td>Contact Number 1</td>
        <td>
          <input type="text" name="contact1" id="contact1"></input>
        </td>
      </tr>

      <tr>
        <td>Contact Number 2</td>
        <td>
          <input type="text" name="contact2" id="contact2"></input>
        </td>
      </tr>

      <tr>
        <td>Address Line 1</td>
        <td>
          <input type="text" name="address1" id="address1"></input>
        </td>
      </tr>

      <tr>
        <td>Address Line 2</td>
        <td>
          <input type="text" name="address2" id="address2"></input>
        </td>
      </tr>

      <tr>
        <td>City</td>
        <td>
          <input type="text" name="city" id="city"></input>
        </td>
      </tr>

      <tr>
        <td>State</td>
        <td>
          <input type="text" name="state" id="state"></input>
        </td>
      </tr>

      <tr>
        <td>Pin Code</td>
        <td>
          <input type="text" name="pin" id="pin"></input>
        </td>
      </tr>

      <tr>
        <td>Set Top Box Limit</td>
        <td>
          <input type="text" name="stblimit" id="stblimit" value="0"></input>
        </td>
      </tr>

      <tr>
        <td>Credit Limit</td>
        <td>
          <input type="text" name="creditlimit" id="creditlimit"></input>
        </td>
      </tr>

      <tr>
        <td>Commission Percentage</td>
        <td>
          <input type="text" name="commission" id="commission" value="0.0"></input>
        </td>
      </tr>

      <tr>
        <td>Service Charges</td>
        <td>
          <input type="text" name="servicecharges" id="servicecharges"></input>
        </td>
      </tr>

      <tr>
        <td>Date of Registration</td>
        <td>
          <input type="text" name="date" id="date"></input>
        </td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td>
          <input type="hidden" value="registerCustomer" name="action"></input>
          <input type="submit" value="Register"></input>
        </td>
      </tr>

    </table>
  </form>
  <br>
  <br>Click

  <a href="mainPage.html"> Home </a>To Return To The Main Screen

</body>

</html>

编辑：

这是我的Eclipse IDE工作区的屏幕截图。我的js文件和html文件不在同一个子文件夹中，尽管它们位于“Web内容”下。这可能是问题吗？

Screenshot of Eclipse IDE Workspace

Answer 1

使用Chrome，它似乎对我有用：

我唯一改变的是我删除了外部JS文件的链接。错误可能存在并阻止您的代码运行。检查该文件。

Answer 2

您可能没有正确链接您的JS文件。

查看截图我注意到你正在使用Tomcat和Java EE，它遵循Unix风格的语法，用于Web服务器上的目录。

您的目录：

-Webcontent/
    -WEB-INF/
        +addRetailer
    -JavaScript/
        +validateForm.js

所以，你的HTML文件在WEB-INF中，在Webcontent下，表单验证器在javascript下，也在webcontent下。

我有三种解决方案：

将JavaScript文件夹移至WEB-INF并将脚本引用更改为：“JavaScript / formvalidation.js”
更改脚本引用，使用双点'..'跳转到'目录层'，最后应为：“../ JavaScript / formvalidator.js”
使用HTML5的表单验证，而不需要JavaScript。而且更整洁。您可以在Mozilla Dev Network here上找到详细信息。

无法获取JavaScript方法来验证我的HTML表单

编辑：

2 个答案:

您的目录：