PDA

View Full Version : form validation including confirm password check



mike7510uk
03-30-2005, 02:48 PM
hi all,
I am trying to use javascript to use form validation as well as password and confirm password check. I have been able to get the form validation bit right but cant get the password bit. Can anyone help

mwinter
03-30-2005, 03:17 PM
I am trying to use javascript to use form validation as well as password and confirm password check.I hope you mean you present two password fields and you want to make sure the entry is the same in both.


I have been able to get the form validation bit right but cant get the password bit. Can anyone helpSure. It's fairly simple: get the value of each password field and perform a lexical comparison (==).


function validate(form) {
var e = form.elements;

/* Your validation code. */

if(e['password'].value != e['confirm-password'].value) {
alert('Your passwords do not match. Please type more carefully.');
return false;
}
return true;
}with a form along the lines of


<form action="..." method="post" onsubmit="return validate(this);">
<!-- ... -->

<label>Password:
<input type="password" name="password" value="">
</label>
<label>Confirm password:
<input type="password" name="confirm-password" value="">
</label>

<!-- ... -->
</form>Hope that helps,
Mike

mike7510uk
03-30-2005, 05:39 PM
ah thank you for that. The only thing is though i have used dreamweavers own form validation and it doesnt seem to like the new code....should i try another type of validation?

mwinter
03-30-2005, 05:47 PM
[...] i have used dreamweavers own form validation and it doesnt seem to like the new code [...]If you post a URL to the original document, I could help you integrate it. If that's not possible, post the relevant parts (the opening form tag and possibly the submit button, plus the validation script), making sure you wrap them with the forum's code or html pseudo-tags (http://www.dynamicdrive.com/forums/misc.php?do=bbcode).

Mike

mike7510uk
03-30-2005, 09:37 PM
ok my code is

<script language="javascript">
<!--
function validate(form) {
var e = form.elements;

/* Your validation code. */

if(e['password'].value != e['confirm'].value) {
alert('Your passwords do not match. Please type more carefully.');
return false;
}
return true;
}
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 == '');
}
//-->
</script>
<form action="newcustomer.asp" method="post" name="customer" onsubmit="return validate(this);MM_validateForm('firstname','','R','lastname','','R','address','','R','city','','R','postcode','','R','telephone','','RisNum','email','','RisEmai l','username','','R','password','','R','confirm','','R');return document.MM_returnValue">

mike7510uk
03-30-2005, 09:52 PM
the rest of the form code is as standard...

mwinter
03-30-2005, 10:54 PM
First of all, I'd like to point out that much of Macromedia's code is junk and awkward to maintain. This example is no exception.

I'll like to mention a few other things, as well as explain why a problem occurs. I'll then post a nicer, though more verbose, alternative.


<script language="javascript">The language attribute has been formally deprecated from HTML for over six years. Replace it with the (required) type attribute instead:


<script type="text/javascript">
<!--The need for this "hiding" went out with Netscape 2 (!) and its peers. You should remove that junk (including the matching closing delimiter -->) from within script and style elements.


onsubmit="return validate(this);MM_validateForm('firstname','','R','lastname','','R','address','','R','city','','R','postcode','','R','telephone','','RisNum','email','','RisEmai l','username','','R','password','','R','confirm','','R');return document.MM_returnValue">The problem here is that the script engine will execute my suggested code, then immediately stop further processing due to the return statement. The quick fix is to combine my return statement with the one generated by Dreamweaver:


onsubmit="MM_validateForm('firstname','','R','lastname','','R','address','','R','city','','R','postcode','','R','telephone','','RisNum','email','','RisEmail','username',' ','R','password','','R','confirm','','R'); return validate(this) && document.MM_returnValue;">The script engine will now call the original script first, then mine, and combine the return values from both.

By the way, I don't think it's a particularly good idea to validate a telephone number as a number. The "number" can take various forms. For example, typical area code separation (aaaaa nnnnnn) or other basic formatting will cause the validation code to label it incorrect. It's better to just leave telephone numbers and other problematic types to human checking. Make them required, if need be, but don't try to enforce a specific format.

An entirely new alternative is presented below. If I imposed changes on your mark-up, I could have made this much tidier. However, those changes might be too radical, so I won't.


function validate(form) {var e = form.elements, m = '';
if(!e['firstname'].value) {m += '- First name is required.\n';}
if(!e['lastname'].value) {m += '- Last name is required.\n';}
if(!e['address'].value) {m += '- Address is required.\n';}
if(!e['city'].value) {m += '- City is required.\n';}
if(!e['postcode'].value) {m += '- Postcode is required.\n';}
if(!e['telephone'].value) {m += '- Telephone number is required.\n';}
if(!/.+@[^.]+(\.[^.]+)+/.test(e['email'].value)) {
m += '- E-mail requires a valid e-mail address.\n';
}
if(!e['username'].value) {m += '- Username is required.\n';}
if(!e['password'].value) {m += '- Password is required.\n';}
if(e['password'].value != e['confirm'].value) {
m += '- Your password and confirmation password do not match.\n';
}
if(m) {
alert('The following error(s) occurred:\n\n' + m);
return false;
}
return true;
}

<form id="customer" action="newcustomer.asp" method="post" onsubmit="return validate(this);">Hope that helps,
Mike

mike7510uk
03-31-2005, 08:34 AM
Thank you so much..I will give all that a go now. The strange thing about this is, i actually undertstand what your saying!!! Never thought javascript would have that effect. I will let you know if it is ok

mike7510uk
03-31-2005, 10:23 AM
It all works fine..thank you very much for your help

maria
05-09-2006, 09:56 AM
Hi all, I have tried adding the javascript code for form validation and password confirmation on an html form. It all works fine locally but when I upload it on the website it does weird things like not checking all fields, and insisitng on password and confirm password being different even when I type in the same info in the two fields.
Any ideas why this is happening?

Thanx in advance

Twey
05-09-2006, 10:43 AM
Oh, dear.

maria
05-11-2006, 08:58 AM
Hi,

Thank you for your reply. This is the code I am using.
Most of it is generated by dreamweaver apart from the confirm passord bit which I added by hand and is probably not the best way around it. The funny thing is, it's not just the password confirmation that doesnt work, it's other fields as well, and it works fine locally. I have also tried using the code I found in this discussion but it doesnt work either as it goes to the next page without doing any checks at all. Anyhow, here it is:

<script type="text/javascript" language="javascript">
<!--
function MM_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.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') {
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 (val<min || max<val) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
}
if (MM_findObj(args[9]).value != MM_findObj(args[12]).value) {
errors+= '- Your password and confirmation password do not match.\n';}
if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script>

.
.
.

<input name="proceedToCCPayment" type="image" src="sign%20up4.jpg" value="Sign up" onClick="MM_validateForm('main language','','R','default currency','','R','username','','R','password','','R','confirmPassword','','R','contactName','','R','contactEmail','','RisEmail','billingStreet','','R','billingC ity','','R');return document.MM_returnValue" />