Another javascript problem

Form is not validating

Page 1 of 1

4 Replies - 847 Views - Last Post: 21 February 2008 - 01:23 PM

#1 jeansymolanza  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 20-February 08

Another javascript problem

Post icon  Posted 21 February 2008 - 08:00 AM

I'm having more javascript issues which is really crippling the rate at which I get on with my work. I managed to successfully implement the "no space" validation code but upon making an extension to it, not all elements of my form valiadation work. Could anyone help?

Thanking you in advance.

Validation script

<script>
<!-- 
function Length_TextField_Validator()
{
// Check the length of the value of the element named text_name
// from the form named form_name if it's < 3 and > 10 characters
// display a message asking for different input
if ((register.password.value.length < 8) || (register.password.value.length > 10))
{
// Build alert box message showing how many characters entered
mesg = "You have entered " + register.password.value.length + " character(s)\n"
mesg = mesg + "Valid entries are between 8 and 10 characters.\n"
mesg = mesg + "Please verify your input and submit again."
alert(mesg);
// Place the cursor on the field for revision
register.password.focus();
// return false to stop further processing
return (false);
}
if (register.password.value.indexOf(" ")>-1){
alert("You may not have any spaces in your password. Please try again.");
return (false);
}
{ if (myForm.password.value != myForm.password2.value) { 
alert("Your passwords don't match. Please double check!"); return false; }
if ( form.agree.checked == false ) { alert ( "Please tick the box to show that you have read and understand the declaration!" ); 
return false; 
}
else
return (true);
}
-->
</script>

<script>

var commonPasswords = new Array('password', 'pass', '1234', '1246'); 
var numbers = "0123456789"; 
var lowercase = "abcdefghijklmnopqrstuvwxyz"; 
var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
var punctuation = "!.@$£#*()%~<>{}[]"; 
 
function checkstrength(password) { 
 
	var combinations = 0; 
 
	if (contains(password, numbers) > 0) { 
		combinations += 10; 
	} 
 
	if (contains(password, lowercase) > 0) { 
		combinations += 26; 
	} 
 
	if (contains(password, uppercase) > 0) { 
		combinations += 26; 
	} 
 
	if (contains(password, punctuation) > 0) { 
		combinations += punctuation.length; 
	} 
 
	// work out the total combinations 
	var totalCombinations = Math.pow(combinations, password.length); 
 
	// if the password is a common password, then everthing changes... 
	if (isCommonPassword(password)) { 
		totalCombinations = 75000 // about the size of the dictionary 
	} 
 
	// work out how long it would take to crack this (@ 200 attempts per second) 
	var timeInSeconds = (totalCombinations / 200) / 2; 
 
	// this is how many days? (there are 86,400 seconds in a day. 
	var timeInDays = timeInSeconds / 86400 
 
	// how long we want it to last 
	var lifetime = 365; 
 
	// how close is the time to the projected time? 
	var percentage = timeInDays / lifetime; 
 
	var friendlyPercentage = cap(Math.round(percentage * 100), 100); 
	if (totalCombinations != 75000 && friendlyPercentage < (password.length * 5)) { 
		friendlyPercentage += password.length * 5; 
	} 
 
	var progressBar = document.getElementById("progressBar"); 
	progressBar.style.width = friendlyPercentage + "%"; 
 
	if (percentage > 1) { 
		// strong password 
		progressBar.style.backgroundColor = "#3bce08"; 
		return; 
	} 
 
	if (percentage > 0.5) { 
		// reasonable password 
		progressBar.style.backgroundColor = "#ffd801"; 
		return; 
	} 
 
	if (percentage > 0.10) { 
		// weak password 
		progressBar.style.backgroundColor = "orange"; 
		return; 
	} 
 
	// useless password! 
	if (percentage <= 0.10) { 
		// weak password 
		progressBar.style.backgroundColor = "red"; 
		return; 
	} 
 
 
} 
 
function cap(number, max) { 
	if (number > max) { 
		return max; 
	} else { 
		return number; 
	} 
} 
 
function isCommonPassword(password) { 
 
	for (i = 0; i < commonPasswords.length; i++) { 
		var commonPassword = commonPasswords[i]; 
		if (password == commonPassword) { 
			return true; 
		} 
	} 
 
	return false; 
 
} 
 
function contains(password, validChars) { 
 
	count = 0; 
 
	for (i = 0; i < password.length; i++) { 
		var char = password.charAt(i); 
		if (validChars.indexOf(char) > -1) { 
			count++; 
		} 
	} 
 
	return count; 
} 
</script>
<script language=javascript>
function validate(agree){
  if (agree.checked == 1)
	alert("Thank you for reading and understanding our declaration.");
  else
	alert("Please tick the box to show that you have read and understand the declaration!")
	agree.checked = 1; 
}
</script>

<script>
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
	if (val) { nm=val.name; if ((val=val.value)!="") {
	  if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
		if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
	  } else if (test!='R') { num = parseFloat(val);
		if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
		if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
		  min=test.substring(8,p); max=test.substring(p+1);
		  if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
	} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>


The form/some validation

[code]<form action="register2.php" method="post" name="register" onsubmit="MM_callJS('valTitle2()');MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail','streetaddress1','','R','streetaddress2','','R','postcode','','R','town','','R','cnumber','','RisNum','secretanswer','','R');MM_callJS('valBdate2()'); MM_callJS('valBmonth2()');MM_callJS('valByear2()');MM_callJS('valCounty2()');MM_callJS('valSecretquestion2()');return document.MM_returnValue">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<script>

<!--
function valTitle(){
if(document.register.title.selectedIndex==0)
{
alert("Please select a title.");
document.register.title.focus();
return false;
}
return true;
}
//-->

<!--
function valTitle2(){
if(document.register.title.selectedIndex==0)
{
alert("Please select a title.");
return false;
}
return true;
}
//-->
</script>

<td>Title</td>
<td colspan="2"><select name="title" id="title" onblur="return valTitle()">
<option value="0">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
<option value="Sir">Sir</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td width="21%">First Name</td>
<td colspan="2"><label>
<input name="firstname" type="text" id="firstname" onblur="MM_validateForm('firstname','','R');return document.MM_returnValue" size="30" maxlength="30">
</label></td>
</tr>
<tr>


<td>Last Name </td>
<td colspan="2"><input name="lastname" type="text" id="lastname" onblur="MM_validateForm('firstname','','R','lastname','','R');return document.MM_returnValue" size="30" maxlength="30"></td>
</tr>
<tr>
<td>Email Address </td>
<td colspan="2"><input name="emailaddress" type="text" id="emailaddress" onblur="MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail');return document.MM_returnValue" size="30" maxlength="30"> </td>
</tr>
<tr>
<td valign="top">Password</td>
<td width="51%" valign="top"><input name="password" type="password" id="password" onblur="MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail','password','','R');return document.MM_returnValue" size="30" maxlength="10" onkeyup="checkstrength(this.value)" onmousemove="checkstrength(this.value)">
<br>
<br>
<span class="style15">Please note that the password needs to be between 8 and 10 characters in length. It may not contain any spaces.</span><br>
<br></td>
<td width="45%" valign="top">Current password strength <br>
<br>
<div style="border: 1px solid gray; width: 100px;">
<div id="progressBar"
style="font-size: 1px; height: 20px;
width: 0px; border: 1px solid white;"></div>
</div></td>
</tr>
<tr>
<td>Confirm Password </td>
<td colspan="2"><input name="password2" type="password" id="password2" onchange="MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail','password','','R','password2','','R');return document.MM_returnValue" size="30" maxlength="10" ></td>
</tr>
<tr>
<td>Street Address (1) </td
><td colspan="2"><input name="streetaddress1" type="text" id="streetaddress1" onblur="MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail','streetaddress1','','R','password','','R','password2','','R');return document.MM_returnValue" size="30"></td>
</tr>
<tr>
<td>Street Address (2)</td>
<td colspan="2"><input name="streetaddress2" type="text" id="streetaddress2" onblur="MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail','streetaddress1','','R','streetaddress2','','R','password','','R','password2','','R');return document.MM_returnValue" size="30" maxlength="10"></td>
</tr>
<tr>
<td>Date of Birth </td>
<td colspan="2"><label>

<script>
<!--
function valBdate(){
if(document.register.birthdate.selectedIndex==0)
{
alert("Please select a birth date.");
document.register.birthdate.focus();
return false;
}
return true;
}

function valBdate2(){
if(document.register.birthdate.selectedIndex==0)
{
alert("Please select a birth date.");
return false;
}
return true;
}
//-->
</script>

<script>
<!--
function valBmonth(){
if(document.register.birthmonth.selectedIndex==0)
{
alert("Please select a birth month.");
document.register.birthmonth.focus();
return false;
}
return true;
}

function valBmonth2(){
if(document.register.birthmonth.selectedIndex==0)
{
alert("Please select a birth month.");
return false;
}
return true;
}
//-->
</script>

<script>
<!--
function valByear(){
if(document.register.birthyear.selectedIndex==0)
{
alert("Please select a birth year.");
document.register.birthyear.focus();
return false;
}
return true;
}

function valByear2(){
if(document.register.birthyear.selectedIndex==0)
{
alert("Please select a birth year.");
return false;
}
return true;
}
//-->
</script>

<select name="birthdate" id="birthdate" onblur="return valBdate()">
<option>dd</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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="birthmonth" id="birthmonth" onblur="return valBmonth()">
<option>mmm</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</label>
<select name="birthyear" id="birthyear" onblur="return valByear()">
<option selected>yyyy</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="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>
</select></td>
</tr>
<tr>
<td>Postcode</td>
<td colspan="2"><input name="postcode" type="text" id="postcode" onblur="MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail','streetaddress1','','R','streetaddress2','','R','postcode','','R','password','','R','password2','','R');return document.MM_returnValue" size="30" maxlength="10"></td>
</tr>
<tr>
<td>Town</td>
<td colspan="2"><input name="town" type="text" id="town" onblur="MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail','streetaddress1','','R','streetaddress2','','R','postcode','','R','town','','R','password','','R','password2','','R');return document.MM_returnValue" size="30" maxlength="20"></td>
</tr>
<tr>

<script>
<!--
function valCounty(){
if(document.register.county.selectedIndex==0)
{
alert("Please select a county.");
document.register.county.focus();
return false;
}
return true;
}

function valCounty2(){
if(document.register.county.selectedIndex==0)
{
alert("Please select a county.");
return false;
}
return true;
}
//-->
</script>

<td>County</td>
<td colspan="2"><select id="county" name="county" onblur="return valCounty()">
<option value="" selected>Please select...</option>
<option>Anglia</option>
<option>Anglia-Cambridgeshire </option>
<option>Anglia-Norfolk </option>
<option>Anglia-Suffolk </option>
<option>Home Counties</option>
<option>Home Counties-Berkshire </option>
<option>Home Counties-Buckinghamshire </option>
<option>Home Counties-Essex</option>
<option>Home Counties-Hertfordshire</option>
<option>Home Counties-Oxfordshire </option>
<option>Home Counties-Surrey </option>
<option>London</option>
<option>London-London Central/West End</option>
<option>London-London City/Docklands</option>
<option>London-London East</option>
<option>London-London North</option>
<option>London-London North West</option>
<option>London-London South East</option>
<option>London-London South West</option>
<option>London-London West</option>
<option>Midlands</option>
<option>Midlands-Derbyshire </option>
<option>Midlands-Herefordshire </option>
<option>Midlands-Leicestershire </option>
<option>Midlands-Lincolnshire </option>
<option>Midlands-Northamptonshire </option>
<option>Midlands-Nottinghamshire </option>
<option>Midlands-Rutland </option>
<option>Midlands-Shropshire </option>
<option>Midlands-Staffordshire </option>
<option>Midlands-Warwickshire </option>
<option>Midlands-West Midlands </option>
<option>Midlands-Worcestershire </option>
&

Is This A Good Question/Topic? 0
  • +

Replies To: Another javascript problem

#2 Nayana  Icon User is offline

  • DIC Hawk - 나야나 नयन:
  • member icon

Reputation: 31
  • View blog
  • Posts: 824
  • Joined: 14-November 07

Re: Another javascript problem

Posted 21 February 2008 - 08:03 AM

Could you please point out which validation code doesn't work? That will make it easier to help you.

You need to post the relevant section for each bit of validation code, and say
  • The input
  • The expected output
  • The actual output

Cheers :)
Was This Post Helpful? 0
  • +
  • -

#3 jeansymolanza  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 20-February 08

Re: Another javascript problem

Posted 21 February 2008 - 08:14 AM

Apologies for the superflous code lol!

<script>
<!--
function Length_TextField_Validator()
{
// Check the length of the value of the element named text_name
// from the form named form_name if it's < 3 and > 10 characters
// display a message asking for different input
if ((register.password.value.length < 8) || (register.password.value.length > 10))
{
// Build alert box message showing how many characters entered
mesg = "You have entered " + register.password.value.length + " character(s)\n"
mesg = mesg + "Valid entries are between 8 and 10 characters.\n"
mesg = mesg + "Please verify your input and submit again."
alert(mesg);
// Place the cursor on the field for revision
register.password.focus();
// return false to stop further processing
return (false);
}
if (register.password.value.indexOf(" ")>-1){
alert("You may not have any spaces in your password. Please try again.");
return (false);
}
{ if (myForm.password.value != myForm.password2.value) {
alert("Your passwords don't match. Please double check!"); return false; }
if ( form.agree.checked == false ) { alert ( "Please tick the box to show that you have read and understand the declaration!" );
return false;
}
else
return (true);
}
-->
</script>


The actual problem lies here. And here:

<input name="Submit" type="submit" value="Submit" onclick="java script: Length_TextField_Validator">


Its almost as if when the form is submitted, Dreamweaver completely ignores the onclick code.

1) INPUT - password and checkbox tick
2) EXPECTED OUTPUT - if password contains less than 8 characters, error message occurs. if password contains space, error message occurs. if checkbox is not ticked, error message occurs.
3) ACTUAL OUTPUT - nothing happens, validation occurs with this perfectly:

<form action="register2.php" method="post" name="register" onsubmit="MM_callJS('valTitle2()');MM_validateForm('firstname','','R','lastname','','R','emailaddress','','RisEmail','streetaddress1','','R','streetaddress2','','R','postcode','','R','town','','R','cnumber','','RisNum','secretanswer','','R');MM_callJS('valBdate2()'); MM_callJS('valBmonth2()');MM_callJS('valByear2()');MM_callJS('valCounty2()');MM_callJS('valSecretquestion2()');return document.MM_returnValue">


I've split validation up into 2 segments as seen, the first of which runs when the user clicks the submit button (which doesn't work) and the second of which runs when during form submission. As both happen simultanouesly, it would work I presume.

I hope this clearer structure better shows my problem.
Was This Post Helpful? 0
  • +
  • -

#4 Mike007  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 7
  • View blog
  • Posts: 332
  • Joined: 30-August 07

Re: Another javascript problem

Posted 21 February 2008 - 12:32 PM

It's not dreamwaver that ignores your code, it's the browser/s. What happends as far as i know is that first when the user submits the form, the first thing that happens is the onsubmit event gets called. The function you have there gets called, ran, and after that the form gets submited anyway. So what i do to avoid this problem is i change the submit button into a button type and have an onclick code there, the function checks if the formis valid -- calling other function to check it. If valid it submits the form using the form's submit() method.

Hope that helps :).
Was This Post Helpful? 0
  • +
  • -

#5 jeansymolanza  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 20-February 08

Re: Another javascript problem

Posted 21 February 2008 - 01:23 PM

Thanks you've helped a lot. The validation is working perfectly now.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1