<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ValidateForm.js"></script>
<link type="text/css" href="formstyle.css" rel="stylesheet"/>
</head>
<body>
<form onsubmit="return validateAll(this)" action="#" method="post">
<label id="lblName" for="txtName">Name</label><input id="txtName" type="text" class="valid" onblur="return validateNonEmpty(this, txtName_Help)"/><span id="txtName_Help"></span><br />
<label id="lblAddress" for="txtAddress">Address</label><input id="txtAddress" type="text" class="valid" onblur="return validateNonEmpty(this, txtAddress_Help)"/><span id="txtAddress_Help"></span><br />
<label id="lblPCode" for="txtPCode">Postcode</label><input id="txtPCode" type="text" class="valid" onblur="return validatePCode(this, txtPCode_Help)"/><span id="txtPCode_Help"></span><br />
<label id="lblPhone" for="txtPhone">Phone</label><input id="txtPhone" type="text" class="valid" onblur="return validateNonEmpty(this, txtPhone_Help)" /><span id="txtPhone_Help"></span><br />
<input name="Submit1" type="submit" value="submit" /><input name="Reset1" type="reset" value="reset"/></form>
</body>
</html>
label{
display:inline-block;
width:100px;
}
input.valid
{
background: #dddddd;
}
input.invalid
{
background: #faa;
}
function validateNonEmpty(tf, helpText) {
var value = tf.value;
if (value) {
tf.className = "valid";
helpText.innerHTML = " ";
return true; //valid - not empty
}
else {
tf.className = "invalid";
helpText.innerHTML = "Empty input"; //error msg
return false; //invalud = empty
}
}
function validateAll(form) {
var success = true;
for (var i = 0; i < form.elements.length; i++) {
var e = form.elements[i];
if (e.onblur) //if onblur event attribute is not emoty
{
//trigger the valdation
success = e.onblur() && success;
}
}
return success;
}
function validatePCode(tf, helpText) {
//check if the value is empty
var isNotEmpty = validateNonEmpty(tf, helpText);
if (isNotEmpty == false) {
return false;
}
//check if the value contains 4 digits
var value = tf.value;
//var regex = /^\d{4}&/;
// var regex = new RegExp("ABC"); //CONTAINTS ABC
// var regex = /^ABC$/; //exactly ABC
//var regex = /A[ABC]C/; //CONTAINS EITHER AAC, ABC OR ACC
// var regex = /^A[ABC]/; //STARTS WITH A FOLLOWED BY EITHER A,B OR C
//var regex = /[ABC]A$/; //SECOND LAST CHAR IS EITHER A,B OR C & LAST CHAR IS A
// var regex = /A[A-C]C/; //CONTAINS EITHER AAC, ABC, ACC
// var regex = /^A.C$/; //3 chars that starts with a, followed by any char ends with c
// var regex = /CA{3}T/; //CONTAINS CAAAT
var regex = /CA{2,}T/; //CONTAINTS c, followed by
var regex = /CA{2, 5}T/; //
var is4Digits = regex.test(value);
if (is4Digits) {
tf.className = "valid";
helpText.innerHTML = " ";
return true; //valid - 4 digits
}
else {
tf.className = "invalid";
helpText.innerHTML = "Invalid postcode"; //error msg
return false; //invalud = empty
}
}
Comments