使用Javascript进行HTML表单验证

我在HTML中使用javascript有点新。我想用javascript验证一个HTML脚本，但是我写的似乎不起作用。谁能告诉我哪里出了问题？？？ 下面是Javascript：

<script type="text/javascript">
function mandatoryFields()
{
var x=document.forms["add"]["contract_id"].value
if (x==null || x=="")
  {
  alert("Please Enter the Contract Title");
  return false;
  }
var x=document.forms["add"]["storydiv"].value
if (x==null || x=="")
  {
  alert("Please Enter a Sprint");
  return false;
  }
var x=document.forms["add"]["storydiv"].value
if (x==null || x=="")
  { 
  alert("Please Enter a Story");
  return false
  }        
var x=document.forms["add"]["date1"].value
if ( x=="" || x==null) 
  { 
  alert("Please Enter a time");
  return false
  }  

</script>

下面是相应的HTML脚本

<form name="add" action="time-sheet/insert-time-sheet.php" method="post" onsubmit="return mandatoryFields()">
<table width="500" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="150">Select Date:</td>
    <td width="336"><input name="date" type="text" value="YYYY-MM-DD" maxlength="100" class="datepick" id="date1" /></td>
  </tr>
  <tr>
    <td>Contract:</td>
    <td><SELECT NAME="contract_id" onChange="getSprint(this.value)"><OPTION VALUE=0>--- Select Contract ---<?php echo $options_contract?></SELECT></td>
  </tr>
  <tr>
    <td>Sprint:</td>
    <td><div id="sprintdiv"><select name="sprint" >
    <option>--- Select Sprint ---</option>
        </select></div></td>
  </tr>
  <tr>
    <td>Story:</td>
    <td><div id="storydiv"><select name="story">
    <option>--- Select Story ---</option>
        </select></div></td>
  </tr>
  <tr>
    <td>Dev Time:</td>
    <td><input name="dev_time" size="20" onkeyup="ondalikSayiKontrol(this)" /></td>
  </tr>
  <tr>
    <td>PM Time:</td>
    <td><input name="pm_time" size="20" onkeyup="ondalikSayiKontrol(this)"/></td>
  </tr>
  <tr>
    <td colspan="2"><table width="182" border="0" align="center" cellpadding="2" cellspacing="2">
      <tr>

        <td width="68"><input name="Submit" type="submit" id="Submit" value="Add Time Sheet" /></td>
        <td width="48"><label>
          <input type="reset" name="reset" value="Reset" />
        </label></td>
        <td width="46"><div align="center"><a href="javascript:history.go(-1);">Back</a></div></td>
      </tr>
      <input type="hidden" name="day" value="<?php echo $day; ?>" />
      <input type="hidden" name="employee_id" value="<?php echo $employee_id; ?>" />
    </table></td>
    </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>
</form>

---

提前谢谢

函数上缺少右大括号。如果您检查浏览器上的错误控制台，它很可能会告诉您mandatoryFields未定义。添加右大括号可以解决这个问题。如果验证均未失败，则还应返回true。最后一件事是在每个if之前重新声明x。不确定是否产生错误，但仍应修复

<script type="text/javascript">
function mandatoryFields()
{
    var x=document.forms["add"]["contract_id"].value;
    if (x==null || x=="")
    {
        alert("Please Enter the Contract Title");
        return false;
    }
    x=document.forms["add"]["storydiv"].value;
    if (x==null || x=="")
    {
        alert("Please Enter a Sprint");
        return false;
    }
    x=document.forms["add"]["storydiv"].value;
    if (x==null || x=="")
    { 
        alert("Please Enter a Story");
        return false;
    }
    x=document.forms["add"]["date1"].value;
    if ( x=="" || x==null) 
    {
        alert("Please Enter a time");
        return false;
    }
    return true; // ADD THIS
} // ADD THIS
</script>

当所有字段都正确时，madatoryFields函数不会返回true

发件人：

如果事件处理程序由表单的onsubmit属性调用 对象，代码必须使用 返回函数，事件处理程序必须提供显式返回 事件处理程序函数中每个可能代码路径的值

---

获取正确的元素并在sprint和story中的选项上执行循环。 您可以使用表单的名称和选择框的名称直接访问元素

var x = document.add.contract_id.value;
if(){
 ... your stuff here
}

也可以访问第一个表单，而不使用其名称属性

x = document.forms[0].contract_id.value;

对于sprint，通过可能的选项循环，然后发出警报

x = document.add.sprint;
var selected = false;
for (i = 0; i < x.length; ++i){
   if (x.options[i].selected == true)
      selected = true;
}
if(!selected){
   alert("Select a story please!");
   return false;
}

x = document.add.story;
selected = false;
// same procedure 

---

不要在每个验证步骤中重新声明var x。

似乎不起作用？？验证HTML脚本？？你是说验证HTML页面上的控件？使用浏览器的javascript控制台查看错误日志并将其粘贴回此处。你是否缺少右括号。你是否有任何错误？尝试使用浏览器的javascript控制台，但没有任何更改但是Javascript仍然不能在HTML脚本上工作

document.getElementById('storydiv').getElementsByTagName('story')[0];

document.getElementsByTagName('contract_id')[0];