Javascript Form Validation

This site is best viewed in a modern browser with JavaScript enabled.

phpnewbie08

Hi, I found the below script to validate form. It validate when field is empty but I need to know how to use the same css border for validating the input (i.e. all numbers only or email format). Any help will be great. Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">

function check (f) {
	var done = true, e, i = 0
	while (e = f.elements[i++]) {if (e.type == 'text' && !/\S/.test (e.value)) {
		e.parentNode.className = 'highlight'
		e.onfocus = function () {this.parentNode.className = ''}
		done = false
	}}
	return done
}

</script>

<style type="text/css">
form { margin:auto; width:11em}
fieldset {padding:1ex}
label {display:block; margin:0; text-align:left}
label.highlight input {border:dotted 1px #C0C}
button {display:block; margin:auto}
</style>

</head>
<body>
<form action="some-script.pl" onsubmit="return check (this)">
<fieldset>
<legend>Example</legend>
<label>Name<input type="text"></label>
<label>Rank<input type="text"></label>
<label>Serial number<input type="text"></label>
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>

ZABI

simply add more fields as you require. it will apply to new fields dynamically. for email validation you will have to add different regular expression and another for numbers.

phpnewbie08

I am not familiar with Javascript. Can someone please provide an example of the regular expression for the email validation? I just need a little help with how to write the regular expression for incorrect format that uses the css styling border to highlight field (NOT the alert message type). Thanks

ZABI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<script type="text/javascript">

function check (f) {
	var done = true, e, i = 0;
	while (e = f.elements[i++]) {
		if (
			(e.type == 'text' && !/\S/.test (e.value)) ||
			(e.name == 'email' && is_email(e.value))
		 ) {
		e.parentNode.className = 'highlight';
		e.onfocus = function () {this.parentNode.className = '';}
		done = false;
	}}
	return done;
}
function is_email(email) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   return reg.test(email);
}
</script>
<style type="text/css">
form {
	margin:auto;
	width:11em
}
fieldset {
	padding:1ex
}
label {
	display:block;
	margin:0;
	text-align:left
}
label.highlight input {
	border:dotted 1px #C0C
}
button {
	display:block;
	margin:auto
}
</style>
</head>
<body>
<form action="some-script.pl" onsubmit="return check (this);">
  <fieldset>
    <legend>Example</legend>
    <label>Name
      <input type="text" name="name">
    </label>
    <label>Email
      <input type="text" name="email">
    </label>
    <label>Rank
      <input type="text" name="rank">
    </label>
    <label>Serial number
      <input type="text" name="serial">
    </label>
    <button type="submit">Submit</button>
  </fieldset>
</form>
</body>
</html>

you can add new fields with their names and check each one for validity depending upon their name. just like i added email field.

two pipe character || are used as OR operator in Javascript. for more you can search Javascript Operators on net.

phpnewbie08

Hi ZABI, I tested your script but it does not validate the email.

ZABI

oh i am sorry i forgot to add NOT operator just before !is_email(e.value);

phpnewbie08

thanks ZABI. It works great. Just one more question. How do I validate confirm email is same as the email provided?

phpnewbie08

Also, how to validate checkbox is check and radio button?

phpnewbie08;1228813 wrote:
thanks ZABI. It works great. Just one more question. How do I validate confirm email is same as the email provided?

ZABI

yes same for confirm email. you can validate checkbox and radio buttons using checked attribute. like !checkbox.checked and same for radio button

phpnewbie08

I had been trying to get the confirm email and checkbox validation but with no luck. I am not sure what I have done wrong. Any help will be appreciated. Also, is it possible to change the e.type for empty field to class name?

Thanks.

function check (f) {
	var done = true, e, i = 0;
	while (e = f.elements[i++]) {
		if (
			(e.type == 'text' && !/\S/.test (e.value)) ||
			(e.name == 'email' && !is_email(e.value)) ||
			(e.name == 'conemail' && !checkEmail(e.value)) ||
			(e.name == 'term' && !chckBox(e.value)) 

	 ) {
	e.parentNode.className = 'highlight';
	e.onfocus = function () {this.parentNode.className = '';}
	done = false;
}}
return done;
}
function is_email(email) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   return reg.test(email);
}

function checkEmail(chkemail) {
    if (chkemail.email.value != chkemail.conemail.value)
    {
return reg.test (chkemail)
}


function chckBox() {
	if (
	term == !checkbox.checked)
	{
		return done;
	}

phpnewbie08

I really need some help. Anyone?

holyhttp

Email field can be of type "text" in HTML4 while web bowsers that support the new HTML5 type="email" might see that type as "email" instead in your JavaScript.

Given he fact that any email field will most likely include the string "email" in he field's name you coud just use:

if(e.name.indexOf('email')!=-1 && !checkEmail(e){ return false; }

For the checkbox keep in mind that your HTML might contain mutilple checkboxes with different names or use an array to group them under one name (e.g. myboxes[] )

In either case you'd certainly only to have at least one checkbox ticked.

The array naming is more JavaScript friendly because you can just use a for loop to determine whether there is a selected checkbox or not.

However using the logic you already have in place:

if(e.type='checkbox' && !e.checked){ return false; }

There is really no need for the chkBox function is you have to test the checkboxes one at a time.

	}//end while loop

	 if(!done) {
	e.parentNode.className = 'highlight';
	e.onfocus = function () {this.parentNode.className = '';}
	done = false;
}
return done;

}

phpnewbie08

I figured out how to validate checkbox but still need help for the following:

one of the 3 radio button is selected.
drop down list (if "select one" is selected highlight the box).
compare confirm email to email provided if not match highlight the box.

Thanks.