form validation including confirm password check

[mike7510uk]

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]

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 help

Sure. 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]

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]

[...] 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.

Mike

[mike7510uk]

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','','RisEmail','username','','R','password','','R','confirm','','R');return document.MM_returnValue">

[mike7510uk]

the rest of the form code is as standard...

[mwinter]

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]

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]

It all works fine..thank you very much for your help

[maria]

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