[go: up one dir, main page]

Live Validator 1.00.A - Documentation

You must provide a regular expression for every field that must be validated. If the regular expression matches the field value, the field will be given the class name 'validation-success' - if not, it will have the class name 'validation-error'. You can change the way the validation shows by changing the properties of these two classes in the style section. The fields that must be validated must have the class name 'live-validate'.

For example, lets take a look at some basic Phone Number Validation. This should have 7 Numbers - so the Regular expression is /^\d{7}$/ - but as we are giving it as a string, we have to escape it - so we give it as "\\d{7}".

Step 1 - Basics

XHTML

<label for="phone">Phone #</label>
<input type="text" name="phone" id="phone" class="live-validate" />

JavaScript

Bind the field with its validation at page load.

function init() {
	documentation.getElementById("phone").setAttribute('match',"^\\d{7}$");
	Validate.init();
}
window.onload=init;

CSS

.validation-error {
	border:1px solid red;
}
.validation-success {
	border:1px solid green;
}

Step 2 - Key Validation

Key validation prevents the users from entering invalid keys - in our case, the users must not be able to enter alphabets into the field. So the only characters that could be entered are numbers - the regular expression for that is [0-9].

JavaScript

function init() {
	documentation.getElementById("phone").setAttribute('match',"^\\d{7}$");
	documentation.getElementById("phone").setAttribute('allowedkeys',"[0-9]");
	Validate.init();
}
window.onload=init;

Now the user will not be able to enter any non-numbers into the field. This is done using the default action prevention method.

Step 3 - Advanced Validation

The above examples are just basic validation - for advanced validations, a regular expression is not enough. We have to use custom validation code. For example, lets say the we only allow phone numbers that add up to 30 or more. If the given phone number is '1234567' it adds up to...

1 + 2 + 3 + 4 + 5 + 6 + 7 = 28

Yes, I know - the example makes no sense. But as long as you understand the code, I don't care. I am sure you could come up with more practical uses of it.

JavaScript

function init() {
	documentation.getElementById("phone").setAttribute('match',"^\\d{7}$");
	documentation.getElementById("phone").setAttribute('allowedkeys',"[0-9]");
	documentation.getElementById("phone").setAttribute('istrue',"customValidate();");
	Validate.init();
}

function customValidate() {
	var number_string = documentation.getElementById('phone').value.toString();
	var total = 0
	for(var i=number_string.length-1;i>0;i--) { //Sneaky, right?
		total += Number(number_string.charAt(i));
	}
	
	if(total>30) return true; //True means that the validation is a success
	else return false;
}
window.onload=init;

The code given in the 'istrue' attribute is eval'ed - if it returns true, the validation was a success and if it returns false, the validation is, you guessed it, a failure

Step 4 - Attach Form

All this big validation goes to waste if the user is allowed to make all the mistakes and still allowed to submit the form. So we have to prevent the user from submitting the form if they have made an error in entering the data. All you have to do is attach a form to the validation - the script will do the rest.

JavaScript

function init() {
	documentation.getElementById("phone").setAttribute('match',"^\\d{7}$");
	documentation.getElementById("phone").setAttribute('allowedkeys',"[0-9]");
	documentation.getElementById("phone").setAttribute('istrue',"customValidate();");

	Validate.attachForm('frm')
	Validate.init();
}

Step 5 - Error messages

The above step will show a generic 'Error!' next to the field if there is an error when the form was submitted. A valid error message is much more helpful for the user. So we will add an error message to this mix...

JavaScript

function init() {
	documentation.getElementById("phone").setAttribute('match',"^\\d{7}$");
	documentation.getElementById("phone").setAttribute('allowedkeys',"[0-9]");
	documentation.getElementById("phone").setAttribute('istrue',"customValidate();");
	documentation.getElementById("phone").setAttribute('errormessage',"Please enter 7 digits - and make sure it adds up to 30 or more");

	Validate.attachForm('frm');
	Validate.init();
}

The error message will be shown in a span with the class 'validation-error-message' - so set the styles for that class too.

CSS

.validation-error-message {
	font-weight:bold;
	color:red;
	margin-left:3px;
	padding-left:20px;
	background:url(error.png) no-repeat left;
}

Final Result



An Easier Way

You may have noticed an easier way of doing this - instead of giving all the validation code in the javascript area, it can be written directly into the input field - like this...

<label for="phone">Phone #</label>
<input type="text" name="phone" id="phone" 
match="^\d{7}$" allowedkeys="[0-9]" istrue="customValidate();" 
errormessage="Please enter 7 digits - and make sure it adds up to 30 or more"
class="live-validate" />

The people who have noticed this would also have noted that this is a bad idea - it produces invalid HTML. But I like to leave the option open.

blog comments powered by Disqus