JS Form Validation help

[psychowolvesbane]

I have this form with validation that is newly added, atm it does not activate the Validate() function from the onsubmit feature of the form, and the php validation kicks in after submitting.

 

I can't see what is stopping it from working, and Firebug is not picking up any errors when activated.

 

If it was working I would be getting the alter pop-ups.

 

<?php

include "connect_details.php";

session_start();

$CBSizes = array("XS","Small", "Medium", "Large", "XL", "XXL", "3XL");
$Submit = $_POST['SubmitB'];
$Errors=0;

$Valid_ClothingCode = true;
$Valid_Description = true;
$Valid_Price = true;
$Valid_NUSPrice = true;
$Valid_ItemType = true;
$Valid_ProductImage = true;
$Valid_ASizes = true;
$Valid_AColours = true;

if($Submit =="Submit")
{
   $ClothingCode = $_POST['ClothingCode'];
   $Description = $_POST['Description'];
   $ItemType = $_POST['ItemType'];
   $Price1 = $_POST['Price1'];
   $Price2 = $_POST['Price2'];
   $NUSPrice1 = $_POST['NUSPrice1'];
   $NUSPrice2 = $_POST['NUSPrice2'];
   $ProductImage = $_FILES['ProductImage']['name'];
   $Max_Size = 102400;
   $dirupload = "../images/products/";
   $Imagetype = $_FILES['ProductImage']['type'];
   $Imagesize = $_FILES['ProductImage']['size'];
   $ProductImage = $_FILES['ProductImage']['name'];
   $image_temp = $_FILES['ProductImage']['tmp_name'];
   list($width, $height) = getimagesize($image_temp);
   $dirupload = "../images/products/";
   $AColours = $_POST['Colours'];
   $ASizes = $_POST['Sizes'];
  
   //ClothingCode Validation

   if(empty($ClothingCode))
   {
      $Message_ClothingCode = "! Please Enter the Clothing Code! (PHP)";
      $Errors++;
      $Valid_ClothingCode = false;
   }

   //Description Validation

   if(empty($Description))
   {
      $Message_Description = "! Please Enter the Description! (PHP)";    
      $Errors++;
      $Valid_Description = false;
   }

   //Item Type Validation
  
   if(empty($ItemType))
   {
      $Message_ItemType = "! Please Select an Item Type! (PHP)";
      $Valid_ItemType = false;
      $Errors++;
   }

   //Price Validation

   if(empty($Price1))
   {
      $Message_Price = "! Please Enter the Price! (PHP)";  
      $Errors++;
      $Valid_Price = false;
   }
   elseif((is_numeric($Price1) == false) || (is_numeric($Price2) == false))
   {
      $Message_Price = "! That is not a valid Price! (PHP)";        
      $Errors++;
      $Valid_Price = false;
   }
   else
   {
      $Price = $Price1.".".$Price2;
      $Valid_Price = true;  
   }

   //NUS Price Validation

   if(empty($NUSPrice1))
   {
      $Message_NUSPrice = "! Please Enter the NUS Price! (PHP)";    
      $Errors++;
      $Valid_NUSPrice = false;
   }
   elseif((is_numeric($NUSPrice1) == false) || (is_numeric($NUSPrice2) == false))
   {
      $Message_NUSPrice = "! That is not a valid NUS Price! (PHP)";  
      $Errors++;
      $Valid_NUSPrice = false;
   }
   else
   {
      $NUSPrice = $NUSPrice1.".".$NUSPrice2;
      $Valid_NUSPrice = true;  
   }

   //Product Image Validation
   if($_SESSION['ProductImage'] == "")
   {
      if ((($Imagetype == "image/jpg") || ($Imagetype == "image/jpeg") || ($Imagetype == "image/jpe")) && ($Imagesize < $Max_Size) && ($width <= 250) && ($height <=300))
      {
         if (file_exists($dirupload . $_FILES['ProductImage']['name']."jpg"))
         {
            $Message_ProductImage = "! That file already exists! (PHP)";
            $Valid_ProductImage = false;
            $Errors++;
         }
         else
         {
            $_SESSION['ProductImage']=$ProductImage;
            $Valid_ProductImage = true;
         }
      }
      else
      {
         $Valid_ProductImage = false;
         $Errors++;
         $Message_ProductImage = "! Please Select a .jpg image file that is no more than 300x250 pixels in size, and is less than 100kb! (PHP)";
      }
   }
   else
   {
      $image_temp= $_SESSION['ProductImage'];
      $Valid_ProductImage =true;
   }

   //Available Sizes Section

   if(count($ASizes) > 0)
   {
      foreach($ASizes AS $Sizes)
      {
         $Valid_ASizes=True;
         $SizeA[$Sizes]= true;
         $AvailableSizes.=$Sizes."?";
      }
   }
   else
   {
      $Valid_ASizes=False;
      $Errors++;
      $Message_ASizes = "! Please Choose any Relevant Sizes! (PHP)";
   }

   //Available Colours Section
  
   if(count($AColours) > 0)
   {
      foreach($AColours AS $Colours)
      {
         $Valid_AColours=True;
         $ColourA[$Colours]= true;
         $AvailableColours.=$Colours."?";
      }
   }
   else
   {
      $Valid_AColours=False;
      $Errors++;
      $Message_AColours = "! Please Choose any Relevant Colours! (PHP)";
   }

   // Upload Section

   if($Errors==10)
   {
      $conn = mysql_connect($Host,$Username,$Password) or die(mysql_error());
      $db = mysql_select_db($Dbname, $conn);

      $sqlNew = "INSERT INTO Clothing (ClothingCode,Description,ItemType,Price,NUSPrice,AvailableSizes,AvailableColours) VALUES('$ClothingCode','$Description','$ItemType','$Price','$NUSPrice','$AvailableSizes','$AvailableColours')";

      $rsNew = mysql_query($sqlNew,$conn)or die('Problem with query: ' . $sqlNew . '<br />' . mysql_error());

      if(mysql_affected_rows($conn) == 1)
      {
         $move_image = move_uploaded_file($image_temp, $dirupload.$ClothingCode.".jpg");
         $_SESSION['NewProduct'] = $ClothingCode;
         $_SESSION['NewAction'] = "Added";
      }
      elseif(mysql_affected_rows($conn) == 0)
      {
         $_SESSION['NewAction'] = "NotAdded";        
      }
      mysql_close($conn);
      $Cont= true;    
   }
}

?>
<html>
<head>
<title>Clothing Line</title>
<link href="stylesheetCL.css" rel="stylesheet">
<?php require('jscript.inc');

if($Cont == true)
{
   unset($_SESSION['ProductImage']);
   ?>
   <meta HTTP-EQUIV="REFRESH" content="0; url=display_products.php?Action=Edit">    
   <?php
}
?>

<script language='JavaScript' type='text/JavaScript'>
<!--

function Validate(f){
   return (ValidateValues(f)==0 ? true : false );
}

function ValidateValues(f)
{
   var Errors = 0
   if((document.AddProduct.ClothingCode.value+'').length<1)
   {
      document.mySpan1.innerHTML='! Please Enter a Clothing Code!';
      Errors++
      alert(1);
   }
   else
   {
      document.mySpan1.innerHTML='';
   }

   if((document.AddProduct.Description.value+'').length<1)
   {
      document.mySpan2.innerHTML='! Please Enter a Description!';
      Errors++
      alert(2);
   }
   else
   {
      document.mySpan2.innerHTML='';
   }

   if(document.AddProduct.ItemType.value="0")
   {
      document.mySpan3.innerHTML='! Please Choose an ItemType!';
      Errors++
      alert(3);
   }
   else
   {
      document.mySpan3.innerHTML='';
   }

   if((document.AddProduct.Price1.value+'').length<1)
   {
      document.mySpan4.innerHTML='! Please Enter the Price!';
      Errors++
      alert(4);
   }
   else
   {
      document.mySpan4.innerHTML='';
   }

   if((document.AddProduct.Price2.value+'').length<1)
   {
      document.mySpan4.innerHTML='! Please Enter the Price!';
      Errors++
      alert(4);
   }
   else
   {
      document.mySpan4.innerHTML='';
   }


   if((document.AddProduct.NUSPrice1.value+'').length<1)
   {
      document.mySpan5.innerHTML='! Please Enter the NUS Price!';
      Errors++
      alert(5);
   }
   else
   {
      document.mySpan5.innerHTML='';
   }

   if((document.AddProduct.NUSPrice2.value+'').length<1)
   {
      document.mySpan5.innerHTML='! Please Enter the NUS Price!';
      Errors++
      alert(5);
   }
   else
   {
      document.mySpan5.innerHTML='';
   }

   if((document.AddProduct.ProductImage.value+'').length<1)
   {
      document.mySpan6.innerHTML='! Please upload a Product Image!';
      Errors++
      alert(6);
   }
   else
   {
      document.mySpan6.innerHTML='';
   }  

   Sizes = document.AddProduct.Sizes.length
   checkchar = ""

   for (i = 0; i < boxes; i++)
   {
      if (document.AddProduct.Sizes[i].checked)
      {
         checkchar = checkchar + document.AddProduct.Sizes[i].value + " "
      }
   }

   if(checkchar=="")
   {
      document.mySpan7.innerHTML='! Please Choose any Relevant Sizes!';
      Errors++
      alert(7);
   }
   else
   {
      document.mySpan7.innerHTML='';
   }


   Sizes = document.AddProduct.Colours.length
   checkchar2 = ""

   for (i = 0; i < boxes; i++)
   {
      if (document.AddProduct.Colours[i].checked)
      {
         checkchar2 = checkchar2 + document.AddProduct.Colours[i].value + " "
      }
   }

   if(checkchar2=="")
   {
      document.mySpan8.innerHTML='! Please Choose any Relevant Colours!';
      Errors++
      alert(;
   }
   else
   {
      document.mySpan8.innerHTML='';
   }
   return Errors;
}

//-->
</script>
</head>
<body>

<?php //require('header.inc') ?>

<?php require('menu.inc') ?>

<div style="position:absolute; top:5px; left:200px; width:550px">

<span class="head1">New Product Form</span><br><br>
<form method="post" enctype="multipart/form-data" name="AddProduct" action="add_product_form.php" onSubmit="return Validate(this);"/>

<span id="mySpan1" class="errmsg"><?php echo $Message_ClothingCode?></span><br>
<span class="head4">Clothing Code:</span><br>
<input type="text" MAXLENGTH="6" name="ClothingCode" value ="<?php echo $ClothingCode?>"/><br><br>

<span id="mySpan2" class="errmsg"><?php echo $Message_Description?></span><br>
<span class="head4">Description:</span><br>
<input type="text" MAXLENGTH="50" name="Description" value ="<?php echo $Description?>"/><br><br>

<span id="mySpan3" class="errmsg"><?php echo $Message_ItemType?></span><br>
<span class="head4">Item Type:</span><br>
<select name="ItemType"/>
<option value="">Please Select an Item Type</option>    

<?php
$conn = mysql_connect($Host,$Username,$Password) or die(mysql_error());
$db = mysql_select_db($Dbname, $conn);
$sql = "SELECT ItemType FROM ItemType ORDER BY ItemType";
$rs = mysql_query($sql, $conn) or die(mysql_error());
    
while($row = mysql_fetch_array($rs))
{
    $Type = $row['ItemType'];
    echo"<option value='$Type'";
    if($ItemType == $Type)
    {echo"Selected";}
    echo">$Type</option>";
}
mysql_close($conn);
?>
</select><br><br>

<span id="mySpan4" class="errmsg"><?php echo $Message_Price?></span><br>
<span class="head4">Price:</span><br>
<input type="int" size="1" MAXLENGTH="3" name="Price1" value="<?php echo $Price1?>"/>.<input type="int" MAXLENGTH="2" size="1" name="Price2" value="<?php echo $Price2?>"/><br><br>

<span id="mySpan5" class="errmsg"><?php echo $Message_NUSPrice?></span><br>
<span class="head4">NUS Price:</span><br>
<input type="int" size="1" MAXLENGTH="3" name="NUSPrice1" value="<?php echo $NUSPrice1?>"/>.<input type="int" MAXLENGTH="2" size="1" name="NUSPrice2" value="<?php echo $NUSPrice2?>"/><br><br>

<span id="mySpan6" class="errmsg"><?php echo $Message_ProductImage?></span><br>
<span class="head4">Product Image: (Must be .jpg image type, 300x250 pixels in dimensions and less than 50Kb in size)</span><br>
<input type="file" name="ProductImage"/><br><br>

<span id="mySpan7" class="errmsg"><?php echo $Message_ASizes ?></span><br>
<span class="head4">Available Sizes:</span><br>
<table id="Sizes"><tr>

<?php
$X=0;
      
while($X!=7)
{
   $Size = $CBSizes[$X];
   echo"<td>$Size:</td>";
   echo"<td><input type='checkbox' name='Sizes[]' value='$Size'";
   if($SizeA[$Size]==true){echo"Checked";}?>></td></tr><tr>
   <?php
   $X++;
}
?>
</tr></table><br>

<span id="mySpan8" class="errmsg"><?php echo $Message_AColours ?></span><br>
<span class="head4">Available Colours: </span>
<table><tr>

<?php
$conn = mysql_connect($Host,$Username,$Password);
$db = mysql_select_db($Dbname, $conn);
$sql = "SELECT AvailableColours FROM Colours ORDER BY AvailableColours";
$rs = mysql_query($sql, $conn) or die(mysql_error());

$NumberOfColours = mysql_num_rows($rs);
$counter = 0;
$X = 0;

if ($result || (mysql_num_rows($rs) > 0))
{
   while ($row = mysql_fetch_assoc($rs))
   {    
      $AvailableColour = $row['AvailableColours'];
      if($counter%9==0&&$counter!=0) echo "</tr><tr>";
      echo "<td><img src='/images/colours/$AvailableColour.gif' title='$AvailableColour'/><br />";
      echo "<td><input type='checkbox' name='Colours[]' value='$AvailableColour'";  
      if($ColourA[$AvailableColour]==true){echo"Checked";}
      echo "></td>";
      $X++;
      ++$counter;
   }
}
?>
</tr></table>
<?php
mysql_close($conn);
?>
<br><br>
<input type="submit" name="SubmitB" value="Submit">
</form><br>
<br><br>

<a href="admin.php">Back to the Admin Menu</a>
</div>
</body>
</html>

[psychowolvesbane]

Can anyone help me see where I'm going wrong? I'm not that competent with Javascript yet but i'm trying.

[nogray]

You only can access form fields by document.form.field, other elements you'll need to use document.getElementById('ID')

 

In your code, you'll need to change

document.mySpan5.innerHTML (or 1, 2,3,4,etc...)

 

to

 

document.getElementById('mySpan5').innerrHTML

 

Hope this helps.

[psychowolvesbane]

Okay I managed to get it working but I still have a few kinks to work out such as numeric and select list validation, which I'm not sure how to achieve.

 

I have this as my current Select list validation but it doesn't want to work.

if(document.AddProduct.ItemType.value='')
{
   document.getElementById('mySpan3').innerHTML='! Please Choose an ItemType!';
   Errors++;
   alert(3);
}
else
{
   document.getElementById('mySpan3').innerHTML='';
}

 

Then i'm not sure about how to go about doing numeric validation for my Price and NUSPrice fields as i can still allow characters to be submitted.

[nogray]

Try to search this form on how to validate numbers (or search google) most likely you'll find a regular expression (something like value.match(/^\d+$/))

 

Try to browse your site using firefox and after you get the error, click on "Tools" (next to File, Edit, View) and select "Error Console" This will help you find the bugs you have.

 

I always use document.getElementById() for anything, for the select menu, try to get the option value

 

document.AddProduct.ItemType.options[document.AddProduct.ItemType.selectedIndex].value

 

and see if that's work.

[psychowolvesbane]

No it doesn't like the line if(document.AddProduct.ItemType.options[document.AddProduct.ItemType.selectedIndex].value='0'), I changed the default value of the selection to "0" and it displays the error message even when an Item Type has been selected. Then changes the selected option back to the default again.

 

   if(document.AddProduct.ItemType.value='0')
   {
      document.getElementById('mySpan3').innerHTML='! Please Choose an ItemType!';
      Errors++;
      alert("3");
   }
   else
   {
      document.getElementById('mySpan3').innerHTML='';
   }
[code]

Plus I'm baffled by another problem with my Price1 val.

It validates it fine but for some reason it just doesn't want to activate the mySpan4 message even though it's inside the accessed selection  statement. I get the alerts correctly when I do something wrong but no message in my span. Yet it works fine in my unaltered Price2 validation.

[code]
   if(document.AddProduct.Price1.value='0')
   {
      document.getElementById('mySpan4').innerHTML='! Please Enter the Price!';
      Errors++;
      alert("4A");
   }
   else if(IsNumeric(document.AddProduct.Price1.value) == false)
   {
      document.getElementById('mySpan4').innerHTML='! Please Enter the Price!';
      Errors++;
      alert("4B");
   }
   else
   {
      document.getElementById('mySpan4').innerHTML='blah blah';
      alert("4C");
   }

   if((document.AddProduct.Price2.value+'').length<1)
   {
      document.getElementById('mySpan4').innerHTML='! Please Enter the Price!';
      Errors++;
      alert("4D");
   }
   else
   {
      document.getElementById('mySpan4').innerHTML='';
      alert("4E");
   }

 

 

 

 

 

[/code][/code]