PDA

View Full Version : Javascript Form Validation



robbiez
07-29-2008, 02:14 PM
Please excuse me as I do hate to be a nusiance but I have searched high & low for an answer.

I am trying to learn PHP & Javascript and I am trying to create a form validation script. I can get the javascript to validate the minimum - maximum numerics entry values(that was easy!!) but I can't get it to only allow numerics - no letters.

Here's what I have so far:



<?php // Receiving variables
$app = $this->globals('khxc.app');
$ns = $this->globals('khxc.namespace');
$eol = $this->globals('khxc.eol');
$proddisp = $this->globals('ecom.prod_proddetail');
$xid = $proddisp['id'];
$id = $this->xhtml_encode($xid);
$pricecode = $proddisp = $this->globals('ecom.prod_proddetail');
$cartimage = $proddisp['imgsm'];
$priceid = $proddisp['prodidx'];
$largeimage = $proddisp['imglg'];
$prodname = $this->xhtml_encode($proddisp['name']);

?>
<script type="text/javascript">

<!--

function validate_form ( )
{
valid = true;

if ( document.quick_price.width.value == "" )
{
alert ( "Please enter a Width measurement." );
valid = false;
}

if ( document.quick_price.length.value == "" )
{
alert ( "Please enter a Width measurement." );
valid = false;
}

if ( document.quick_price.width.value < 100 )
{
alert ( "Please enter a Width measurement over 100mm" );
valid = false;
}

if ( document.quick_price.width.value > 915 )
{
alert ( "Please enter a Width measurement under 915mm" );
valid = false;
}

if ( document.quick_price.length.value < 100 )
{
alert ( "Please enter a Length measurement over 100mm" );
valid = false;
}

if ( document.quick_price.length.value > 1220 )
{
alert ( "Please enter a Length measurement under 1220mm" );
valid = false;
}



return valid;
}


//-->

</script>


<form name="quick_price" action="http://www.thepictureframingexperts.co.uk/gbu0-display/customprice.html" method="post" id="remoteadd" onSubmit="return validate_form ( );">

<p align="center" class="hidden"><input type="hidden" name="name" id="name" value="<?php print $prodname ;?>" /></p>
<p align="center" class="hidden"><input type="hidden" name="pricecode" id="pricecode" value="<?php print $priceid ;?>" /></p>
<p align="center" class="hidden"><input type="hidden" name="image" id="image" value="<?php print $largeimage ;?>" /></p>

<p align="center" class="hidden"><input type="hidden" name="cartimage" id="cartimage" value="<?php print $cartimage ;?>" /></p>

<p align="center" class="hidden"><input type="hidden" name="number" id="number" value="<?php print $id ;?>" /></p>

<p align="center" class="hidden">
<input type="hidden" name="price" id="price" value="<?php print $frametotal ;?>" /></p>

<div class="khxc_red">
<input name="length" type="text" id="length" size="5" maxlength="4">
mm &nbsp;&nbsp;&nbsp;+ &nbsp;&nbsp;&nbsp;
<input name="width" type="text" id="width" size="5" maxlength="4" />
mm &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input class="khxc_formbutton" type="submit" name="submit" id="submit" value="Check Price" />
</div>
</form>

Thanks in advance

Rob

binaryWeapon
07-29-2008, 09:49 PM
This google search (http://www.google.com/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=javascript+numbers+only+validation&spell=1) gave me this forum thread (http://www.webmasterworld.com/forum91/504.htm) at the top of the list, and the first answer was a good one:
The function isNaN() returns True if the argument is NOT a number - NaN = Not a Number

I've a feeling a read somewhere that it returns true for negative numbers rather than false but I'm not sure of that.

and his second post:
if (isNaN(MyForm.QuantityReq.value))
{ message += "- Please enter your quantity as a number.";
submitOK="False"; } Of course you would customize that, the important part is the isNaN function.

isNaN info: http://www.w3schools.com/jsref/jsref_isNaN.asp

You could also use a regex solution, like what is explained a little down in the google search: http://blog.techsaints.com/2007/04/10/javascript-number-validation-integer/

There are many others if these do not help.

HTH, GL!