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.

HTML Code:
<html lang="en">
<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">

<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


<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}

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