使用Javascript进行HTML表单验证

即时通讯在HTML中使用JavaScript。我想验证一个使用javascript的HTML脚本，但是我写的似乎不起作用。谁能告诉我我要去哪里？这里是JavaScript：使用Javascript进行HTML表单验证

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

提前

谢谢！

来源

2013-03-26 user2093306

“似乎没有工作”？ – Liam 2013-03-26 14:19:31

验证“HTML脚本”??你的意思是验证HTML页面仪式上的控件？ – iJade 2013-03-26 14:19:34

使用浏览器的javascript控制台查看错误日志并将其粘贴回来。 – alf 2013-03-26 14:20:26

你错过了功能上的大括号。如果您在浏览器上检查错误控制台，它很可能会告诉您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-26 14:20:58 jonhopkins

你madatoryFields()功能没有返回真正当所有字段是正确的。

从here：

如果事件处理程序是由形式对象的onsubmit属性调用时，代码必须明确地请求使用回报函数的返回值，以及事件处理程序必须提供一个在事件处理函数中为每个可能的代码路径显式返回值。

来源

2013-03-26 14:24:23 Esteve

所做的更改尚未对JavaScript脚本进行处理 – user2093306 2013-03-26 14:41:56

得到正确的元素上的选项进行冲刺和故事的内循环。您可以使用表单的名称和选择框的名称直接访问元素。

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-26 14:50:56 Lemonade

使用Javascript进行HTML表单验证

回答

相关问题