[SOLVED] Javascript Validation

mbrown · October 24, 2008

I am trying to validate my modify page through javascript first then php. The php side is working great, always has. The problem is with my javascript. I have included a external javascript source file. It was easier to do that. I have attached my modify.php which is the page you go to view information in the database. The modify2.php which will update the recrords in the datbase if it passes php validation and javascript. The adminScript.js that is the external javascript source file.

Any help would be awesome!

mbrown

P.S. Below is my adminScript.js code

// JavaScript Document
function validate()
	{
		errorMessage = "";

		//name
		if (document.modify.name$count.value == "")
		{
			errorMessage += "Your first name is blank, please enter your name\n";
		}//end of if (document.modify.Name.value == "")

		if (document.modify.name$count.value.length < 5)
		{
			errorMessage += "Please enter a name that is longer\n";
		}//end of if (document.Mikes_Student_Survey.Name.value.length < 5)

		//Last
		if (document.modify.last$count.value == "")
		{
			errorMessage += "Please enter a last name\n";
		}//end of if (document.modify.Last.value == "")

		if (document.modify.last$count.value.length < 
		{
			errorMessage += "Please enter a longer last name\n";
		}//end of if (document.modify.Last.value.length < 


		//age
		//if (document.modify.Age.value == "")
		//{
		//	errorMessage += "Your age is blank, please enter your age\n";
		//}//end of if (document.modify.Age.value == "")

		if (document.modify.age$count.value < 18 || document.modify.age$count.value > 100)
		{
			errorMessage += "Your age is invalid, it must be 18-100\n";
		}//end of if (document.modify.Age.value < 18 || document.modify.Age.value > 100)]

		//month
		if (document.modify.month$count.value == 0)
		{
			errorMessage += "Please select a Month\n";
		}//end of if (document.modify.Month.value == 0)

		//DayofBirth
		if (document.modify.day$count.value == 0)
		{
			errorMessage += "Please select a Day of Birth\n";
		}//end of if (document.modify.DayofBirth == 0)

		//birthYear
		if (document.modify.year$count.value == 0)
		{
			errorMessage += "Please select a year of birth\n";
		}//end of if (document.modify.birthYear.value == 0)

		//hometown
		if (document.modify.hometown$count.value == "")
		{
			errorMessage += "Please enter a hometown\n";
		}//end of if (document.modify.hometown.value == "")

		//State
		if (document.modify.state$count.value == "---")
		{
			errorMessage += "Please select a State\n";
		}//end of if (document.modify.State.value == ---)

		//YearofGrad
		if (document.modify.grad$count.value == "")
		{
			errorMessage += "Please enter your year of graduation\n";
		}//end of if (document.modify.YearofGrad.value == "")

		if (document.modify.grad$count.value.length != 4)
		{
			errorMessage += "Please enter your year of graduation that is 4 digits (i.e. 2004)\n";
		}//end of if (document.modify.YearofGrad.value.length != 4)


		//Associates

		//Bachelors

		//Certificate

		//FieldofStudy
		if (document.modify.study.value == "")
		{
			errorMessage += "Please enter a field of study\n";
		}//end of if (document.modify.FieldOfStudy.value == "")

		if (document.modify.study$count.value.length < 10 )
		{
			errorMessage += "Please enter a degree that has a longer name\n";
		}//end of if (document.modify.FieldofStudy.value.length < 10 ) 


		//GPA
		if (document.modify.gpa$count.value == '---')
		{
			errorMessage += "Please select a GPA\n";
		}//end of if (document.modify.GPA.value == '---')

		//email
		if (document.modify.email$count.value == "")
		{
		  errorMessage += "Please enter your email address. \n";
		}//end of if (document.modify.email.value == "")

		else
		{
		  var email = document.modify.email$count.value;
		  // name the reg expression filter
		  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		  //tset the email field against the reg exp if true => good
		  if (!filter.test(email)) 
		  {
			  errorMessage += "Please provide a valid email address \n";
		  }//end of  if (!filter.test(email)) 
		}//end of else

		//validating zipcode
		if (document.modify.zipcode$count.value.length != '5' && document.modify.zipcode$count.value.length != '10')
		{
			errorMessage += "The zip code is not of valid length (5 or 10 characters)\n";
		}//end of if (document.modify.zipcode.value.length != 5 || document.modify.zipcode.value.length != 10)

		if (document.modify.zipcode$count.value == "")
		{
			errorMessage += "Your zip code is blank, please enter one\n";
		}//end of if (document.modify.zipcode.value == "")

		//validating numcredits
		if (isNaN(document.modify.numcredits$count.value))
		{
			errorMessage += "The number of credits is not a numerical value. Please enter a number\n";
		}//end of if (isNaN(document.MikesStudentSurvey.zipcode.value)

		if (document.modify.numcredits$count.value == "")
		{
			errorMessage += "You did not enter your total number of credits\n";
		}//end of if (document.modify.numcredits.value)

		if (document.modify.numcredits$count.value < 1 || document.modify.numcredits$count.value > 130)
		{
			errorMessage += "You did not enter a valid number of credits (1-130)\n";
		}//end of if (document.modify.numcredits.value < 1 || document.modify.numcredits.value > 130)


		if (errorMessage == "")
		{
			return true;
		}//end of if (errormsg == "")

		else 
		{
			alert(errorMessage);
		}//end of else

	return false;

	}//end of function validate()

	function calculateSemesters()
	{

		document.modify.numSemesters$count.value = Math.ceil(document.modify.numcredits$count.value / 15);
	}//end of function calculateSemesters()

[attachment deleted by admin]

F1Fan · October 24, 2008

You'll get a better response if you just try posting the relevant code in the code tags.

Also, it helps to tell us what your problem is.

mbrown · October 24, 2008

I am not sure what stuff you need so I included it all. it is not autoconfiguring the age and the number of semesters left based on the number of credits.

F1Fan · October 24, 2008

What JS errors are you getting and its it submitting the page?

mbrown · October 24, 2008

none. error console is not showing anything in FF

F1Fan · October 24, 2008

...and its it submitting the page?

mbrown · October 24, 2008

yes it is going to the php validation. i want it to do the javascript first. i tried it with purposeful errors in the modify

mbrown · October 24, 2008

i also moved the <script> </script> tags from the top of the page since there is no <head> </head> tags to this

echo " <script type='text/javascript' src='../../javascript/adminScript.js'></script>";

i still get it not going to the javascript for validation goes directly to the php validation.

F1Fan · October 24, 2008

OK, post your PHP code that is calling this JS validation code. It sounds like it's not depending on the return of true or false from the JS function of whether it submits or not.

mbrown · October 24, 2008

<head>
<link href="../../css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<?php
session_start();
if ($_SESSION['loggedIn'] == TRUE)
{
	$username = $_SESSION['username'];
	echo "User Logged In: $username";

	include ('topofpage.php');
	echo "	<script type='text/javascript' src='../../javascript/adminScript.js'></script>";
	//includes the database connection script
	include('dbconnect.php');

	echo "<div align = 'center'>Please remember when editing the study, you need to provide a \", \" if you want to include multiple majors.</div><br />";

	//Query
	$Query = "SELECT * FROM survey";

	$Display = mysqli_query ($db, $Query) or die("<p>Unable to execute the query.</p>" . "<p>Error Code</p>" . mysqli_errno($db) . ": " . mysqli_error($db) . "</p>");

	$mike = mysqli_fetch_assoc($Display);

	echo "<form name ='modify' action='modify2.php' method='post' onsubmit='return validate()'>";
	echo "<table border='5' align='center' width = '100%'>\n
				<tr>
					<th>chan?</th>
					<th>ID</th>
					<th>Date</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Age</th>
					<th>Month</th>
					<th>Day</th>
					<th>Year</th>
					<th>Hometown</th>
					<th>State</th>
					<th>Grad</th>
					<th>Certificate</th>
					<th>Associates</th>
					<th>Bachelors</th>
					<th>Study</th>
					<th>GPA</th>
					<th>Email Address</th>
					<th>Zip Code</th>
					<th>Credits Left</th>
					<th>Num. Semesters</th>
				</tr>";
			echo "\n";

	$count = 0;

	while ($mike)
	{
		echo "
			<tr>\n
			<td><input type = 'checkbox' name = 'changed$count' size ='1''></td>
			<td><input type = 'text' name = 'id$count' value ='$mike[iD]' readonly=readonly size='2'></td>\n
			<td><input type = 'text' name = 'date$count' value ='$mike[Date]' readonly=readonly size = '5'></td>\n
			<td><input type = 'text' name = 'name$count' value ='$mike[Name]' size = '10' maxsize = '10'</td>\n
			<td><input type = 'text' name = 'last$count' value ='$mike[LastName]' size = '10'</td>\n
			<td><input type = 'text' name = 'age$count' value ='$mike[Age]' size = '2'</td>\n
			<td><input type = 'text' name = 'month$count' value ='$mike[Month]' size = '10'</td>\n
			<td><input type = 'text' name = 'day$count' value ='$mike[Day]' size = '2'</td>\n
			<td><input type = 'text' name = 'year$count' value ='$mike[Year]' size '4' maxsize = '4' onchange='calculateAge()'</td>\n
			<td><input type = 'text' name = 'hometown$count' value ='$mike[Hometown]' size ='10'</td>\n
			<td><input type = 'text' name = 'state$count' value ='$mike[state]' size = '10'</td>\n
			<td><input type = 'text' name = 'grad$count' value ='$mike[Graduation]' size ='4'</td>\n
			<td><input type = 'text' name = 'cert$count' value ='$mike[Certificate]' size ='3'</td>\n
			<td><input type = 'text' name = 'assoc$count' value ='$mike[Associates]'size ='3'</td>\n
			<td><input type = 'text' name = 'bach$count' value ='$mike[bachelors]'size ='3'</td>\n
			<td><input type = 'text' name = 'study$count' value ='$mike[study]'size ='40'</td>\n";
	/*	echo "<td>";
			$StudyArray = explode(",", $mike[study]);
			foreach($StudyArray as $Study)
			{
				echo "<input type = 'text' name = 'study$count' value ='$Study'<br /> ";
			}//emd of foreach($StudyArray as $Study)

		echo "</td>\n";*/

		echo "<td><input type = 'text' name = 'gpa$count' value ='$mike[GPA]' size = '8'</td>\n
			<td><input type = 'text' name = 'email$count' value ='$mike[email]'</td>\n
			<td><input type = 'text' name = 'zipcode$count' value ='$mike[zipcode]' size ='10' maxsize='10'</td>\n
			<td><input type = 'text' name = 'numcredits$count' value ='$mike[numcredits]' size ='3' maxsize='3'</td>\n
			<td><input type = 'text' name = 'numSemesters$count' value ='$mike[numSemesters]'</td>\n

	</tr>\n";

		//goes through for each record
		$mike = mysqli_fetch_assoc($Display); 
		$count++;
	}//end of while ($mike)
	echo "Total recrods: $count";

	echo "<tr><td colspan = '16'<input type = 'submit' ></td></tr>";
	echo "<input type = 'hidden' name = 'count' value = $count>";
	echo "</table>";
	echo "</form>";
	include ('bottomofpage.php');
}
else
{
	header('Location: ../index.php');
}
?>

F1Fan · October 24, 2008

Try removing "onsubmit='return validate()'" from your form tag and add "onclick='return validate();'" to your submit button.

Also, change your JS code to ONLY return false. Then, if your form submits anyway, you'll know the problem is in your PHP code, and if it doesn't, you'll know it's in your JS code.

mbrown · October 24, 2008

now i get document.modify.name$count is undefined now on line 12

F1Fan · October 24, 2008

JS doesn't know what "$count" is. That is a PHP variable. Try passing the $count variable into the JS validate function, then create a for loop for the number of $counts there are.

mbrown · October 24, 2008

the for loop in the JS?

F1Fan · October 24, 2008

// JavaScript Document
   function validate(count)
      {
         errorMessage = "";
         var i
         for (i=0;i<=count;i++){
         //name
         if (document.modify.name+i.value == "")
         {...
         ...}

Although, I always use id's, not names in JS, so I'm not quite sure if that will work

mbrown · October 24, 2008

where is count coming from? is the for for all of my validation?

F1Fan · October 24, 2008

Ah, sorry. Well, you can either grab it using:

var count = document.modify.count.value;

or pass it in like this:

onclick='return validate('<?php echo $count; ?>');

mbrown · October 24, 2008

it goes right through and no javascript validation

my roommate looked at it quick and said the following

it is looking for name = "name+i" instead of name = "name1"

F1Fan · October 24, 2008

Right. Like I said, I never use names, I use id's. Add this to each of your inputs:

...id='changed$count'...

Then change all of your "document.modify.changed+i" to "document.getElementById('changed'+i)"

mbrown · October 24, 2008

k let me give this a worl. how long you going to be around>

mbrown · October 24, 2008

i do not have naything that says document.modify.changed+i

i have document.modify.name+1

F1Fan · October 24, 2008

I was just using that as an example. Modify it to your needs.

I'll be around off and on until 5 pm MST.

mbrown · October 24, 2008

still same. i thought variables from php would not work in js?

F1Fan · October 24, 2008

Post your updated code again.

mbrown · October 24, 2008

the adminScript.js

// JavaScript Document
function validate(count)
	{
		errorMessage = "";

		//name
		//if (document.modify.name$count.value == "")
		//{
		//	errorMessage += "Your first name is blank, please enter your name\n";
		//}//end of if (document.modify.Name.value == "")

         var i
		 for (i=0;i<=count;i++)
		 {
			 //name
			// alert (document.getElementById('name'+i));
			 if (ocument.getElementById('name'+i) == "")
			 {
				 errorMessage += "Please enter a name \n"			 
			 }//end of if (document.modify.name+i.value == "")
		 }//end of for (i=0;i<=count;i++)

		/*if (document.modify.name$count.value.length < 5)
		{
			errorMessage += "Please enter a name \n";
		}//end of if (document.Mikes_Student_Survey.Name.value.length < 5)

		//Last
		if (document.modify.last$count.value == "")
		{
			errorMessage += "Please enter a last name\n";
		}//end of if (document.modify.Last.value == "")

		if (document.modify.last$count.value.length < 
		{
			errorMessage += "Please enter a longer last name\n";
		}//end of if (document.modify.Last.value.length < 


		//age
		//if (document.modify.Age.value == "")
		//{
		//	errorMessage += "Your age is blank, please enter your age\n";
		//}//end of if (document.modify.Age.value == "")

		if (document.modify.age$count.value < 18 || document.modify.age$count.value > 100)
		{
			errorMessage += "Your age is invalid, it must be 18-100\n";
		}//end of if (document.modify.Age.value < 18 || document.modify.Age.value > 100)]

		//month
		if (document.modify.month$count.value == 0)
		{
			errorMessage += "Please select a Month\n";
		}//end of if (document.modify.Month.value == 0)

		//DayofBirth
		if (document.modify.day$count.value == 0)
		{
			errorMessage += "Please select a Day of Birth\n";
		}//end of if (document.modify.DayofBirth == 0)

		//birthYear
		if (document.modify.year$count.value == 0)
		{
			errorMessage += "Please select a year of birth\n";
		}//end of if (document.modify.birthYear.value == 0)

		//hometown
		if (document.modify.hometown$count.value == "")
		{
			errorMessage += "Please enter a hometown\n";
		}//end of if (document.modify.hometown.value == "")

		//State
		if (document.modify.state$count.value == "---")
		{
			errorMessage += "Please select a State\n";
		}//end of if (document.modify.State.value == ---)

		//YearofGrad
		if (document.modify.grad$count.value == "")
		{
			errorMessage += "Please enter your year of graduation\n";
		}//end of if (document.modify.YearofGrad.value == "")

		if (document.modify.grad$count.value.length != 4)
		{
			errorMessage += "Please enter your year of graduation that is 4 digits (i.e. 2004)\n";
		}//end of if (document.modify.YearofGrad.value.length != 4)


		//Associates

		//Bachelors

		//Certificate

		//FieldofStudy
		if (document.modify.study.value == "")
		{
			errorMessage += "Please enter a field of study\n";
		}//end of if (document.modify.FieldOfStudy.value == "")

		if (document.modify.study$count.value.length < 10 )
		{
			errorMessage += "Please enter a degree that has a longer name\n";
		}//end of if (document.modify.FieldofStudy.value.length < 10 ) 


		//GPA
		if (document.modify.gpa$count.value == '---')
		{
			errorMessage += "Please select a GPA\n";
		}//end of if (document.modify.GPA.value == '---')

		//email
		if (document.modify.email$count.value == "")
		{
		  errorMessage += "Please enter your email address. \n";
		}//end of if (document.modify.email.value == "")

		else
		{
		  var email = document.modify.email$count.value;
		  // name the reg expression filter
		  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		  //tset the email field against the reg exp if true => good
		  if (!filter.test(email)) 
		  {
			  errorMessage += "Please provide a valid email address \n";
		  }//end of  if (!filter.test(email)) 
		}//end of else

		//validating zipcode
		if (document.modify.zipcode$count.value.length != '5' && document.modify.zipcode$count.value.length != '10')
		{
			errorMessage += "The zip code is not of valid length (5 or 10 characters)\n";
		}//end of if (document.modify.zipcode.value.length != 5 || document.modify.zipcode.value.length != 10)

		if (document.modify.zipcode$count.value == "")
		{
			errorMessage += "Your zip code is blank, please enter one\n";
		}//end of if (document.modify.zipcode.value == "")

		//validating numcredits
		if (isNaN(document.modify.numcredits$count.value))
		{
			errorMessage += "The number of credits is not a numerical value. Please enter a number\n";
		}//end of if (isNaN(document.MikesStudentSurvey.zipcode.value)

		if (document.modify.numcredits$count.value == "")
		{
			errorMessage += "You did not enter your total number of credits\n";
		}//end of if (document.modify.numcredits.value)

		if (document.modify.numcredits$count.value < 1 || document.modify.numcredits$count.value > 130)
		{
			errorMessage += "You did not enter a valid number of credits (1-130)\n";
		}//end of if (document.modify.numcredits.value < 1 || document.modify.numcredits.value > 130)

		*/
		//if (errorMessage == "")
		//{
		//	return true;
		//}//end of if (errormsg == "")

		//alert(errorMessage);
		if (errorMessage != "") 
		{
			alert(errorMessage);
			return false;
		}//end of else

	return true;

	}//end of function validate()

	function calculateSemesters()
	{

		document.modify.numSemesters$count.value = Math.ceil(document.modify.numcredits$count.value / 15);
	}//end of function calculateSemesters()

modify.php

<link href="../../css/stylesheet.css" rel="stylesheet" type="text/css" />

<?php
session_start();
if ($_SESSION['loggedIn'] == TRUE)
{
	$username = $_SESSION['username'];
	echo "User Logged In: $username";

	include ('topofpage.php');
	echo "	<script type='text/javascript' src='../../javascript/adminScript.js'></script>";
	//includes the database connection script
	include('dbconnect.php');

	echo "<div align = 'center'>Please remember when editing the study, you need to provide a \", \" if you want to include multiple majors.</div><br />";

	//Query
	$Query = "SELECT * FROM survey";

	$Display = mysqli_query ($db, $Query) or die("<p>Unable to execute the query.</p>" . "<p>Error Code</p>" . mysqli_errno($db) . ": " . mysqli_error($db) . "</p>");

	$mike = mysqli_fetch_assoc($Display);

	echo "<form name ='modify' action='modify2.php' method='post'>";
	echo "<table border='5' align='center' width = '100%'>\n
				<tr>
					<th>chan?</th>
					<th>ID</th>
					<th>Date</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Age</th>
					<th>Month</th>
					<th>Day</th>
					<th>Year</th>
					<th>Hometown</th>
					<th>State</th>
					<th>Grad</th>
					<th>Certificate</th>
					<th>Associates</th>
					<th>Bachelors</th>
					<th>Study</th>
					<th>GPA</th>
					<th>Email Address</th>
					<th>Zip Code</th>
					<th>Credits Left</th>
					<th>Num. Semesters</th>
				</tr>";
			echo "\n";

	$count = 0;

	while ($mike)
	{
		echo "
			<tr>\n
			<td><input type = 'checkbox' id = 'name$count' name = 'changed$count' size ='1''></td>
			<td><input type = 'text' name = 'id$count' value ='$mike[iD]' readonly=readonly size='2'></td>\n
			<td><input type = 'text' name = 'date$count' value ='$mike[Date]' readonly=readonly size = '5'></td>\n
			<td><input type = 'text' name = 'name$count' value ='$mike[Name]' size = '10' maxsize = '10'</td>\n
			<td><input type = 'text' name = 'last$count' value ='$mike[LastName]' size = '10'</td>\n
			<td><input type = 'text' name = 'age$count' value ='$mike[Age]' size = '2'</td>\n
			<td><input type = 'text' name = 'month$count' value ='$mike[Month]' size = '10'</td>\n
			<td><input type = 'text' name = 'day$count' value ='$mike[Day]' size = '2'</td>\n
			<td><input type = 'text' name = 'year$count' value ='$mike[Year]' size '4' maxsize = '4' onchange='calculateAge()'</td>\n
			<td><input type = 'text' name = 'hometown$count' value ='$mike[Hometown]' size ='10'</td>\n
			<td><input type = 'text' name = 'state$count' value ='$mike[state]' size = '10'</td>\n
			<td><input type = 'text' name = 'grad$count' value ='$mike[Graduation]' size ='4'</td>\n
			<td><input type = 'text' name = 'cert$count' value ='$mike[Certificate]' size ='3'</td>\n
			<td><input type = 'text' name = 'assoc$count' value ='$mike[Associates]'size ='3'</td>\n
			<td><input type = 'text' name = 'bach$count' value ='$mike[bachelors]'size ='3'</td>\n
			<td><input type = 'text' name = 'study$count' value ='$mike[study]'size ='40'</td>\n";
	/*	echo "<td>";
			$StudyArray = explode(",", $mike[study]);
			foreach($StudyArray as $Study)
			{
				echo "<input type = 'text' name = 'study$count' value ='$Study'<br /> ";
			}//emd of foreach($StudyArray as $Study)

		echo "</td>\n";*/

		echo "<td><input type = 'text' name = 'gpa$count' value ='$mike[GPA]' size = '8'</td>\n
			<td><input type = 'text' name = 'email$count' value ='$mike[email]'</td>\n
			<td><input type = 'text' name = 'zipcode$count' value ='$mike[zipcode]' size ='10' maxsize='10'</td>\n
			<td><input type = 'text' name = 'numcredits$count' value ='$mike[numcredits]' size ='3' maxsize='3' onchange='calculateSemesters()'</td>\n
			<td><input type = 'text' name = 'numSemesters$count' value ='$mike[numSemesters]'</td>\n

	</tr>\n";

		//goes through for each record
		$mike = mysqli_fetch_assoc($Display); 
		$count++;
	}//end of while ($mike)
	echo "Total recrods: $count";

	echo "<tr><td colspan = '16'<input type = 'submit' onclick='return validate()' ></td></tr>";
	echo "<input type = 'hidden' name = 'count' value = $count>";
	echo "</table>";
	echo "</form>";
	include ('bottomofpage.php');
}
else
{
	header('Location: ../index.php');
}
?>

Sign In

[SOLVED] Javascript Validation

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information