Recently, I have been working on a project, which had a really huge form and required variety of complex client side validations. I tried jQuery.validation plugin but it was getting complex to write validations and was not satisfying my needs. Well, jQuery validate is really a great plugin, but I felt it little quirky and was uncomfortable with it.

This lead to me an idea and I decided to write my own script. So, I wrote a simple and lightweight jQuery plugin to validate form elements with the help of regular expressions and data attributes and made it open source. ( Code sharing is really amazing thing happened to programming industry, isn’t it? )

For the latest updates you can always follow the project on Github: https://github.com/HarishChaudhari/jquery-regexer/

Usage

Register function on document ready.

$(document).ready(function(){
	$('#form').regexer();
});

You may wish to configure few variables like this.

$(document).ready(function(){
	$('#form').regexer({
		reqFieldMsg: 		'This field is required',
		incorrecFormatMsg: 	'Incorrect Format',
		errAlertMsg:		'There are validation errors in this step.',
		exclude:		'button, .dont-validate'
	});
});

Your form markup could be like this. Its not mandatory to have markup like this, but at least input tags should have a parent wrapper, say div, so that it can append validation messages for the fields.

<form id="form" action="">
	<div>
		<label>First name</label>
		<input id="fname" type="text" value="" data-vtype="regex" data-regtype="name" data-isnull="0" />
	</div>
	<div>
		<label>Middle name</label>
		<input id="mname" type="text" value="" data-vtype="regex" data-regtype="name" data-isnull="0" />
	</div>
	<div>
		<label>Last name</label>
		<input id="lname" type="text" value="" data-vtype="regex" data-regtype="name" data-isnull="0" />
	</div>
	<input id="sub" type="submit" value="subm" />  
</form>

Data Attributes

Those three data attributes are used for processing.

data-vtype: Valdiation Type

Possible values: ‘regex’ or ‘null’

• For required elements use ‘regex’ : Use of ‘regex’ allows ONLY appropriate value for element. Value cannot be blank.
• For non-required elements use ‘null’ : Use of ‘null’ allows zero length value for element. Value can be blank.
• But value will be checked against regtype if isnull = 1 if value.length > 0

data-regtype: Type of regex

Possible values: ‘name’, ‘address’, ‘number’, ‘phone’, ‘zip’, ‘ssn’, ‘fssn’, ‘sssn’, ‘tssn’, ‘date’, ’email’

• Please note that regular expression used in this script are following US standards of data structure.
• If this is used in conjunction with data-vtype ‘null’ & isnull = 1, then it will validate the value if it is filled with appropriate regtype provided. This may sound little confusing but you will understand once you get familiar with it.

data-isnull: Is Null

Possible values: 0 or 1 (not_null OR allow_null)

• If 1 then, element can have null value
• If 0, then, element must have some value

There are still lots of TODO things, which I would want this script to have. I will add them soon.

Please do let me know your feedback, identified bugs in code or suggestions. You may also contribute to the project by sending pull-requests. 🙂