javascript表单验证 - 在表单提交上调用两个脚本

时间:2011-12-24 05:46:24

标签: javascript validation scripting submit

我有一个如下所示的PHP。该页面有一些javascript验证。我正在使用网站found here上找到的gen_validatorv4.js。

此脚本完美无缺,但无法对日期时间字段进行比较验证。为此,我从另一个stackoverflow帖子found here获得了帮助。感谢@RobG给了我一个工作日期时间比较验证脚本。

我的问题是,当我将两个脚本添加到页面时,只有一个工作,禁用另一个。如何在提交表单时获取两组代码?

我的完整代码ii如下所示,感谢提前帮助和节日祝福所有人! 莱恩

<html>
<head>
<title>

</title>
<script src="datetimepicker_css.js"></script>
<script language="JavaScript" src="gen_validatorv4.js" type="text/javascript" xml:space="preserve"></script>
</head>


<body>

<?PHP
$usernname1=$session->username;

//trailers
$trailers="SELECT vehicletypename from vehicletypes"; 
$resulttrailer=mysql_query($trailers); 

$optionstrailer=""; 

while ($row=mysql_fetch_array($resulttrailer)) { 

    $trailer=$row["vehicletypename"]; 
    $optionsdelivery.="<OPTION VALUE=\"$trailer\">".$trailer; 
} 



//Source
$sources="SELECT sourcename from shuttlesources"; 
$resultsources=mysql_query($sources); 

$optionssources=""; 

while ($row=mysql_fetch_array($resultsources)) { 

    $sourcename=$row["sourcename"]; 
    $optionssources.="<OPTION VALUE=\"$sourcename\">".$sourcename; 
} 


//Destination
$destination="SELECT destinationname from shuttledestinations"; 
$resultdestination=mysql_query($destination); 

$optionsdestination=""; 

while ($row=mysql_fetch_array($resultdestination)) { 

    $destinationname=$row["destinationname"]; 
    $optionsdestination.="<OPTION VALUE=\"$destinationname\">".$destinationname; 
} 


//routes
$routesql="SELECT routename from deliveryroutes where transporttype='localpmb'"; 
$resultdestination=mysql_query($routesql); 

$optionsroute=""; 

while ($row=mysql_fetch_array($resultdestination)) { 

    $routename=$row["routename"]; 
    $optionsroute.="<OPTION VALUE=\"$routename\">".$routename; 
} 

?>



<form onsubmit="return checkDates(this)" name="myform" id="myform" action=captureshuttledelivery2.php method=post>
<font color=red><b>Provide information to create shuttle delivery</b></font><br><br>
<table>
<tr>
<td width=150>
<font color=blue>TRAILER
</td>
<td width=150>
<font color=blue>SOURCE
</td>
<td width=150>
<font color=blue>WEIGHT
</td>

</tr>
<tr>

<td>
    <SELECT NAME=trailer style="width:140px;"> 
    <OPTION VALUE=0>
    <?=$optionsdelivery?> 
    </SELECT> 
</td>
<td>
    <SELECT NAME=source style="width:140px;"> 
    <OPTION VALUE=0>
    <?=$optionssources?> 
    </SELECT> 
</td>
<td>
<input type=text name=weight id=weight>
</td>
</tr>
<tr>
<td width=150>
<font color=blue>REF NUMBER 1</b></font>
</td>
<td width=150>
<font color=blue>REF NUMBER 2</b></font>
</td>
<td width=150>
<font color=blue>REF NUMBER 3</b></font>
</td>
<td width=150>
<font color=blue>REF NUMBER 4</b></font>
</td>
</tr>
<tr>
<td>
<input type=text name=refnumber id=refnumber>
</td>
<td>
<input type=text name=refnumber2 id=refnumber2>
</td>
<td>
<input type=text name=refnumber3 id=refnumber3>
</td>
<td>
<input type=text name=refnumber4 id=refnumber4>
</td>
</tr>
<tr>
<td>
<font color=blue>COLLECTION TIME
</td>
<td>
<font color=blue>DELIVERY TIME
</td>

</tr>
<tr>

<td>
<input type="text" id="collectdatetime" name="collectdatetime">
 <img src="images2/cal.gif" onclick="javascript:NewCssCal ('collectdatetime','yyyyMMdd','dropdown',true,'24')"  style="cursor:pointer"/>
</td>
<td>
<input type="text" id="deliverdatetime" name="deliverdatetime" >
 <img src="images2/cal.gif" onclick="javascript:NewCssCal ('deliverdatetime','yyyyMMdd','dropdown',true,'24')"  style="cursor:pointer"/>
</td>
</tr>

<tr>
<td colspan=4>
<font color=blue>COMMENTS
</td>
</tr>
<tr>
<td colspan=4>
<input type=text name=comments id=comments size=100 value=none>
</td>
</tr>


</table>
<table>
<tr><td>
<input type=submit name=submit id=submit value="Save Delivery">
</td></tr></table>


</form>

<script> 
function checkDates(form) { 
  if (form.collectdatetime.value >= form.deliverdatetime.value) { 
    alert('Collection time must be after deliver time'); 
    return false; 
  } 
} 
</script> 
<script language="JavaScript" type="text/javascript" xml:space="preserve">
//<![CDATA[
//You should create the validator only after the definition of the HTML form
  var frmvalidator  = new Validator("myform");

  frmvalidator.addValidation("trailer","dontselect=0","Please select a TRAILER TYPE");

  frmvalidator.addValidation("source","dontselect=0","Please select a SOURCE");

  frmvalidator.addValidation("weight","req","Please enter the LOAD WEIGHT");
  frmvalidator.addValidation("weight","numeric","Entered LOAD WEIGHT not a number");

  frmvalidator.addValidation("refnumber","req","Please enter at least one REFERENCE NUMBER");
  frmvalidator.addValidation("refnumber","numeric");

  frmvalidator.addValidation("collectdatetime","req","Please enter a COLLECTION DATE AND TIME");

  frmvalidator.addValidation("deliverdatetime","req","Please enter a DELIVERY DATE AND TIME");

//]]>

</script>

  </body>
  </html>

1 个答案:

答案 0 :(得分:1)

您需要CUSTOM验证程序,因为无法直接比较这两个值

这未经过测试 - 我认为我们需要创建日期或访问datpicker getTime()值而不是输入字段中的字符串值:

frmvalidator.setAddnlValidationFunction("DoCustomValidation");

function DoCustomValidation() {
  var form = document.forms["myform"];
  if (form.collectdatetime.value >= form.deliverdatetime.value) { 
    alert('Collection time must be after deliver time'); 
    return false; 
  } 
  return true;
}