Ex:
<form>
<label>Name:</label>
<input type="text" id="name" name="name" size="20" autofocus="autofocus" /><br/>
<label>LastName:</label>
<input type="text" id="lastname" name="lastname" /><br/>
<label>Telephone:</label>
<input type="text" id="telephone" name="telephono" /><br/>
<input type="button" value="Validate" id="boton_validate" />
<input type="reset" value="Clear" />
</form>Then bellow the form we write the JS code:
<script type="text/javascript">
function validate() {
var name= document.getElementById("name");
var lastname= document.getElementById("lastname");
var telephone= document.getElementById("telephone");
if (name.value.trim() == "") {
name.focus();
return alert("There is an empty element");
} else {
if (lastname.value.trim() == "") {
lastname.focus();
return alert("There is an empty element");
} else {
if (telephone.value.trim() == "") {
telephone.focus();
return alert("There is an empty element");
}
}
}
}
document.getElementById("validate_button").onclick = validate;
</script>
First we create the "validate" function, on it the code that this will return.
We assign to JS variables the HTML inputs. Ex: var name = document.document.getElementById("name");
We ask if the JS variables values are empty then we send the focus to the corresponding input (name.focus();) and we send to screen the message (return alert("There is an empty element");)
Finally we decide that the validate button's name (this case "validate_button", identified by its id in HTML ), the event "onclick" returns "validate" that is the function's name.
Note: The function trim() is used to eliminate white spaces in the begging and ending of a string.
Definitely the full code will look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript Form Validation</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<hr />
<h2> JavaScript form validation </h2>
<hr />
<form>
<label>Name:</label>
<input type="text" id="name" name="name" size="20" autofocus="autofocus" /><br/>
<label>LastName:</label>
<input type="text" id="lastname" name="lastname" /><br/>
<label>Telephone:</label>
<input type="text" id="telephone" name="telephone" /><br/>
<input type="button" value="Validate" id="validate_button" />
<input type="reset" value="Clear" />
</form>
<script type="text/javascript">
function validate() {
var name= document.getElementById("name");
var lastname= document.getElementById("lastname");
var telephone= document.getElementById("telephone");
if (name.value.trim() == "") {
name.focus();
return alert("There is an empty element");
} else {
if (lastname.value.trim() == "") {
lastname.focus();
return alert("There is an empty element");
} else {
if (telephone.value.trim() == "") {
telephone.focus();
return alert("There is an empty element");
}
}
}
}
document.getElementById("validate_button").onclick = validate;
</script>
</body>
</html>
0 Comments:
Post a Comment