Question

JavaScript无法正确验证表单。当未输入所需字段时，浏览器只是加载到下一页，而不是显示警告框，就好像用户确实输入了字段一样。

<head>
<script type="text/javascript">
  function inputValidation() {
    var dateBox= document.forms["form"]["date"].value;
    if (dateBox== null || dateBox== "") {
      alert("Please enter an approximate date.");
      return false;
    }
  }
</script>

</head>
<body>

  <form name="form" id="form" action="add.php" onsubmit="inputValidation()" method="post">
    <fieldset id="contactFields">
      <legend>Client Information</legend><br>
      <p id="require"><span>*</span>Required information</p><br>
      <table width="291" height="158">
        <tr>
          <td>Approximate Date Serviced:<span>*</span></td>
          <td><input type="text" name="date" id="date" size="20" maxlength="25">
        </tr>

        <tr>
          <td>First Name:</td>
          <td><input type="text" name="fName" id="fName" size="20" maxlength="25" /></td>
        </tr>
        <tr>
          <td>Last Name:</td>
          <td><input type="text" name="lName" id="lName" size="20" maxlength="25"/></td>
        </tr>
      </table>
      <label class="blockLabel">Comments:<span>*</span><br><textarea name = "comment" id="comment" rows="5" cols="55"></textarea>

      <label id="wordcountLabel" for="wordcount">
        <div>Character Count:<input type="text" id="wordcount" readonly="readonly" value="0/0"></div>
      </label>
    </fieldset>
    <div id="submit"><input text-align="center" class="button1" type="submit" value="Submit"></div>
    <input text-align="center" class="button3" type="reset" value="Reset" />
  </form>
</body>

任何想法？请帮忙！

Answer 1

假设代码正常工作且只有验证没有 - 我的猜测是你想要的东西如下：

onsubmit="return inputValidation()"

完整代码：

<head>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function inputValidation()
{
  var dateBox= document.forms["form"]["date"].value;
  if (dateBox== null || dateBox== "")
  {
      alert("Please enter an approximate date.");
      return false;
  }
  return true;
}
</script>    
</head>
<body>    
<form name="form" id="form" action="add.php" onsubmit="return inputValidation()" method="post">    
  <fieldset id="contactFields">    
  <legend>Client Information</legend><br />    
<p id="require"><span>*</span>Required information</p><br />    
<label class="blockLabel">Approximate Date Serviced: <span>*</span><br/><input type="date" name = "date" id="date"/><br/><br/>
<label class="blockLabel">First Name: <span>*</span><br/><input type="text" name = "firstName" id="firstName"/><br/><br/>
<label class="blockLabel">Last Name: <span>*</span><br/><input type="text" name = "lastName" id="lastName"/><br/><br/>

<label class="blockLabel">Comments:<span>*</span><br/><textarea name = "comment" id="comment" rows="5" cols="55"></textarea>

<label id="wordcountLabel" for="wordcount">
<div>Character Count:<input type="text" id="wordcount" readonly="readonly" value="0/0" /></div>
</label>

</fieldset>
  <div id="submit"><input text-align="center" class="button1" type="submit" value="Submit" /></div>

<input text-align="center" class="button3" type="reset" value="Reset" />
</form>
</body>

Answer 2

您是否尝试过使用浏览器进行调试并检查dateBox的值？我从未见过像这样引用的表单值，它可能无法获得您需要的值。

表单验证无法正常工作

2 个答案: