How do I use a submit function to ensure that a name field only has letters, zip code field only has numbers, etc. w/ Javascript when submitting a form?

I'm trying to make sure I understand what I'm doing here since some of this is entirely new to me. I've come up with the following code to check for a valid email address. Is this right?

else if (document.forms[0].elements[2].value != "/^.+@.+\..{2,3,4,6}$/") {
	window.alert("Please enter a valid email address.");
	}

Also, would this be correct use of the isNaN() function?

else if (isNaN(document.forms[0].elements[6].value))
	window.alert("Please enter a valid Zip Code.");
	}

Or would this be correct?

var zipCheck = isNaN(zip);
	else if (zipCheck == true) {
	window.alert("Please enter a valid zip code.");
		return false;
	}

Here's one of my forms, it validates all the fields in the form. You can use this form - edit the spaces you need. For numbers only the script says "error" must contain numbers only.

Hope this gets you going in the right direction.

J

<script type="text/JavaScript">
<!--
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 == '');
}
//-->
</script>

Edited 3 Years Ago by Dani: Formatting fixed

TnWb, I really do appreciate this. Don't think that I don't. But at the same time I'm trying to learn just how the isNaN function works so that I understand how to use it. Unfortunately, the book that I have barely touches on the use of it and really explains nothing at all of the how-to's of it.

From what I've been able to gleam from some online research, you have to use a variable in order to use the isNaN function. Am I right with this?

this is for checking only numbers:

function Only_Num(id)
{
 if(isNaN(document.getElementById(id).value))
 {
  alert("Please Enter Only Numbers (0-9)..");
  document.getElementById(id).value="";
  document.getElementById(id).focus();
 }
 return;
}

this for only letters:

function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

No, both your usages of isNaN won't work since they would also work for input such as "3E3". A better way would be to make sure that your form field only contains dots and digits. Also in both the cases, there is an implicit conversion from Javscript String object to Number object. A better way would be create a Number object out of the form field input and then pass it to isNaN function since it can then be reused.

The way a isNaN function works is that it tests whether the input passed to it is Not A Number. If the input is a string, it is then converted to a Number object using the normal parsing rules. If the input is invalid, the Number construction results in a NaN which when passed to isNaN returns true.

Concerning your validations, they can become a lot easier if you know how to use Regular Expressions. A simple example would be (untested):

var nameRegex = /^[a-zA-Z]+$/;
var zipRegex = /^\d+$/;
var someName = "sos";
var someZip = "3434";
if(nameRegex.test(someInput)) {
  window.alert(someName + " is a valid name.");
}
if(zipRegex.test(someInput)) {
  window.alert(someZip + " is a valid zip code.");
}

please tell me where is that <?php include("menu.inc");?>
i cant get menu.inc where is that please explain about that

This article has been dead for over six months. Start a new discussion instead.