3 Replies - 857 Views - Last Post: 21 November 2009 - 08:55 AM

#1 Daytona10  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 12-October 09

Javascript Form validation help?

Posted 20 November 2009 - 03:18 PM

I already found a javascipt validation for the name and email but i also need it for the select option for month/day/year, and also the comment box. I tried copy it and changing the name to ''Month'' but it didnt work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
function validateForm(form) 
{
   var name  = form.Name.value.replace( /^\s+/,"").replace(/\s+$/,""); // trim name
   var email = form.Email.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim email
 

   var regName = /^[a-zA-Z\'\s]{3,99}$/;
   var regEM   = /^[a-z][\w\-\'\.]*\@([a-z][\w\-\']+\.)+[a-z]{2,6}$/i;


   if ( ! regName.test(name) ) 
   {
	   alert( "Please enter your name." );
	   return false;
   } 
   if ( ! regEM.test(email) ) 
   {
	   alert( "Please enter a valid e-mail address." );
	   return false;
   } 
   return true; // all okay
   
   
}

</script>
</head>

<body>

<form action="process.php" method="post" onsubmit="return validateForm(this);">

<table width="506" height="268" border="0">
  <tr>
	
	<td width="500"><label>
	Name (required)<br />
	<br />
	
	<input type="text" size="40" maxlength="40" name="Name">
	<br />
 
	</label></td>
  </tr>
  <tr>
	
	<td><label>
	  Email Address (required)<br />
	  <br />
	  <input type="text" size="40" maxlength="40" name="Email">
	</label></td>
  </tr>
  <tr>
	
	<td><label>
	  Date of Birth (required)<br />
	  <br />
<select name='Month'>
  <option selected></option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>

	  </select>
	  <select name='Day'>
	  
  <option selected></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>		
  <option value="28">28</option>		  
  <option value="29">29</option>			
  <option value="30">30</option>			
  <option value="31">31</option>

	  </select>
	  <select name='YYYY'>
  <option selected></option>
  <option value="2012">2012</option>
  <option value="2011">2011</option>
  <option value="2010">2010</option>
  <option value="2009">2009</option>
  <option value="2008">2008</option>
  <option value="2007">2007</option>
  <option value="2006">2006</option>
  <option value="2005">2005</option>
  <option value="2004">2004</option>
  <option value="2003">2003</option>
  <option value="2002">2002</option>
  <option value="2001">2001</option>
  <option value="2000">2000</option>
  <option value="1999">1999</option>
  <option value="1998">1998</option>
  <option value="1997">1997</option>
  <option value="1996">1996</option>
  <option value="1995">1995</option>
  <option value="1994">1994</option>
  <option value="1993">1993</option>
  <option value="1992">1992</option>
  <option value="1991">1991</option>
  <option value="1990">1990</option>
  <option value="1989">1989</option>
  <option value="1988">1988</option>
  <option value="1987">1987</option>
  <option value="1986">1986</option>
  <option value="1985">1985</option>
  <option value="1984">1984</option>
  <option value="1983">1983</option>
  <option value="1982">1982</option>
  <option value="1981">1981</option>
  <option value="1980">1980</option>
  <option value="1982">1982</option>
  <option value="1981">1981</option>
  <option value="1980">1980</option>
  <option value="1979">1979</option>
  <option value="1978">1978</option>
  <option value="1977">1977</option>
  <option value="1976">1976</option>
  <option value="1975">1975</option>
  <option value="1974">1974</option>
  <option value="1973">1973</option>
  <option value="1972">1972</option>
  <option value="1971">1971</option>
  <option value="1970">1970</option>
  <option value="1969">1969</option>
  <option value="1968">1968</option>
  <option value="1967">1967</option>
  <option value="1966">1966</option>
  <option value="1965">1965</option>
  <option value="1964">1964</option>
  <option value="1963">1963</option>
  <option value="1962">1962</option>
  <option value="1961">1961</option>
  <option value="1960">1960</option>
  <option value="1959">1959</option>
  <option value="1958">1958</option>
  <option value="1957">1957</option>
  <option value="1956">1956</option>
  <option value="1955">1955</option>
  <option value="1954">1954</option>
  <option value="1953">1953</option>
  <option value="1952">1952</option>
  <option value="1951">1951</option>
  <option value="1950">1950</option>
  <option value="1949">1949</option>
  <option value="1948">1948</option>
  <option value="1947">1947</option>
  <option value="1946">1946</option>
  <option value="1945">1945</option>
  <option value="1944">1944</option>
  <option value="1943">1943</option>
  <option value="1942">1942</option>
  <option value="1941">1941</option>
  <option value="1940">1940</option>
  <option value="1939">1939</option>
  <option value="1938">1938</option>
  <option value="1937">1937</option>
  <option value="1936">1936</option>
  <option value="1935">1935</option>
  <option value="1934">1934</option>
  <option value="1933">1933</option>
  <option value="1932">1932</option>
  <option value="1931">1931</option>
  <option value="1930">1930</option>
  <option value="1929">1929</option>
  <option value="1928">1928</option>
  <option value="1927">1927</option>
  <option value="1926">1926</option>
  <option value="1925">1925</option>
  <option value="1924">1924</option>
  <option value="1923">1923</option>
  <option value="1922">1922</option>
  <option value="1921">1921</option>
  <option value="1920">1920</option>
  <option value="1919">1919</option>
  <option value="1918">1918</option>
  <option value="1917">1917</option>
  <option value="1916">1916</option>
  <option value="1915">1915</option>
  <option value="1914">1914</option>
  <option value="1913">1913</option>
  <option value="1912">1912</option>
  <option value="1911">1911</option>
  <option value="1910">1910</option>
  <option value="1909">1909</option>
  <option value="1908">1908</option>
  <option value="1907">1907</option>
  <option value="1906">1906</option>
  <option value="1905">1905</option>
  <option value="1904">1904</option>
  <option value="1903">1903</option>
  <option value="1902">1902</option>
  <option value="1901">1901</option>
  <option value="1900">1900</option>

	  </select>
	</label></td>
  </tr>
  <tr>
	
	<td>
	<label>  
	Comments (required)<br />
	<br />
	<textarea rows="5" cols="45" name="Comment" wrap="physical"></textarea><br />	
	</label></td>
  </tr>
</table>
<p>
  <label>
	<input type="submit" name="Submit" id="button" value="Submit" />
	<input type="reset" name="Reset" id="button" value="Reset" />
  </label>
</p>
</form>

</body>
</html>

</html>


This post has been edited by Daytona10: 20 November 2009 - 03:20 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript Form validation help?

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 834
  • Joined: 25-October 08

Re: Javascript Form validation help?

Posted 20 November 2009 - 07:17 PM

You could use this to set-up a valid date to begin with, then there would be no need to validate further...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Dates</title>

<script type="text/javascript">
// Put following into external JS file if desired

var DateElements = ['inputYear','inputMonth','inputDay'];	
// match names of drop down <select> boxes in HTML

function SBoxSetup(IDS,ArrInfo) {
  s = document.getElementById(IDS);
  var scnt = s.options.length;
  for (var i = scnt-1; i >= 0; i--) { s.options[i] = null; }
  var tmp = [];
  for (i = 0; i < ArrInfo.length; i++ ) {
	tmp = ArrInfo[i].split('|');
	if (tmp[1] == '') { tmp[1] = tmp[0]; }
	s.options[s.options.length] = new Option(tmp[0],tmp[1],false,false);
  }
}

var now = new Date();
var yyyy = now.getFullYear();	// current year
var mmmm = now.getMonth();	// current month (0..11)
var dddd = now.getDate();	// current date (1..30)

// var iYears = ['2009|', '2008|', '2007|', '2006|', '2005|', '2004|'];
// var iYears = [];  for (var i=yyyy-2; i<yyyy+8; i++) { iYears.push(i+'|'); }	// alternative setup
var iYears = [];  for (var i=yyyy+3; i>(yyyy-100); i--) { iYears.push(i+'|'); }	// alternative setup

var iMonths= ['January|01','February|02','March|03',	'April|04',  'May|05',	 'June|06',
			  'July|07',   'August|08',  'September|09','October|10','November|11','December|12'];
var iDays  = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function SBoxSetupDays(IDS) {
  s = document.getElementById(IDS);
  var scnt = s.options.length;
  for (var i = scnt-1; i >= 0; i--) { s.options[i] = null; }
  var daysInMonth = iDays[mmmm];
  if ((yyyy % 4 == 0) && (mmmm == 1)) { daysInMonth++; } 	// leap year check
  var d = 0;
  for (i = 1; i <= daysInMonth; i++ ) {
	d = i<10?'0'+i:i;
	s.options[s.options.length] = new Option(d,d,false,false);
  }
}

function DateUpdate() {
  yyyy = Number(document.getElementById(DateElements[0]).value);
  mmmm = Number(document.getElementById(DateElements[1]).value)-1;
  dddd = Number(document.getElementById(DateElements[2]).value)-1;
  DateInitialize('inputDay');	  
}
function DateInitialize() {
  document.getElementById(DateElements[0]).value = yyyy;
  SBoxSetup(DateElements[1],iMonths);
  document.getElementById(DateElements[1]).selectedIndex = mmmm;
  SBoxSetupDays(DateElements[2]);
  document.getElementById(DateElements[2]).selectedIndex = dddd;
};

function DisplayDate() {
  var yy = document.getElementById(DateElements[0]).value;
  var mm = document.getElementById(DateElements[1]).value;
  var dd = document.getElementById(DateElements[2]).value;
//  return mm+'/'+dd+'/'+yy;	// alternate order
  return yy+'-'+mm+'-'+dd;	// if desired
}

// Following from: http://www.htmlgoodies.com/beyond/javascript/article.php/3724571
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
	window.onload = func;
  } else {
	window.onload = function() {
	  if (oldonload) { oldonload(); }
	  func();
	}
  }
}
addLoadEvent(DateInitialize);
// addLoadEvent(function) {  /* more code to run on page load */
// });

</script>

<head>
<body> <!-- onload="DateInitialize()" alternative to addLoadEvent() -->
 <form name="myForm" onsubmit="return false">

  <select name ="inputMonth" id="inputMonth" onclick="DateUpdate()">
   <script type="text/javascript">SBoxSetup('inputMonth',iMonths)</script>
  </select>

  <select name = "inputDay" id="inputDay" >
   <script type="text/javascript">SBoxSetupDays('inputDay')</script>
  </select>   

  <select name ="inputYear" id="inputYear" onclick="DateUpdate()">
   <script type="text/javascript">SBoxSetup('inputYear',iYears)</script>
  </select>

  <!-- for testing purposes only -->
  <button onclick="alert(DisplayDate())">Display</button>

 </form>
</body>
</html>



For the comments element, in the validation section, try...
function validateForm(form) {
   var name  = form.Name.value.replace( /^\s+/,"").replace(/\s+$/,""); // trim name
   var email = form.Email.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim email
 

   var regName = /^[a-zA-Z\'\s]{3,99}$/;
   var regEM   = /^[a-z][\w\-\'\.]*\@([a-z][\w\-\']+\.)+[a-z]{2,6}$/i;


   if ( ! regName.test(name) )
   {
	   alert( "Please enter your name." );
	   return false;
   }
   if ( ! regEM.test(email) )
   {
	   alert( "Please enter a valid e-mail address." );
	   return false;
   }
   if ( form.Comment.value == '') {
	   alert( "Please enter a 'Comment'." );
	   return false;
  }
   return true; // all okay
}


Was This Post Helpful? 0
  • +
  • -

#3 Daytona10  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 12-October 09

Re: Javascript Form validation help?

Posted 21 November 2009 - 04:32 AM

Good code thanks!
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 834
  • Joined: 25-October 08

Re: Javascript Form validation help?

Posted 21 November 2009 - 08:55 AM

You're most welcome.
Happy to help.
Good Luck!
:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1