2013-07-09 88 views
0

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> 

任何想法的人?请帮忙!

回答

2

假设代码是工作,只有验证不会 - 我的猜测是,你想要的东西,像下面这样:

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

@RobG我相信我们达成一致:) – alfasin

+0

@RobG现在问题已解决 - 答案也是如此:) – alfasin

1

您是否尝试过使用浏览器进行调试并检查dateBox的值?我从来没有见过像这样引用过的表单值,它可能没有得到你需要的值。

+0

引用形式值“这样的“从一开始就一直是javascript的一部分。你的回答可能应该是一个评论,因为它不是一个答案。 – RobG

+0

我很欣赏你的意见,但至少有助于找到答案。这就是这个地方的用途,对吧? – Seano666

+0

作为回答发布的内容更适合作为评论。 Alfasin在你之前发布了一个(大部分是正确的)答案,所以我提交另一个答案没有意义。 – RobG