0

我在 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>

提前致谢！

4

3 回答 3

2

您缺少该函数的右大括号。如果您检查浏览器上的错误控制台，它很可能会告诉您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>
于 2013-03-26T14:20:58.657 回答
0

当所有字段都正确时，您的madatoryFields()函数不会返回true 。

从这里：

如果事件处理函数被表单对象的onsubmit属性调用，代码必须使用return函数显式请求返回值，并且事件处理函数必须为事件处理函数中的每一个可能的代码路径提供一个显式的返回值。

于 2013-03-26T14:24:23.743 回答
0

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

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

您也可以在不使用其名称属性的情况下访问第一个表单。

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

冲刺循环通过可能的选项，然后发出警报。

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

您还可以通过 getElementByID() 和 getElementsByTagName() 访问元素，后者返回所有匹配元素的数组。

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

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

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

于 2013-03-26T14:50:56.760 回答