Photo by Markus Spiske on Unsplash

dovalidate-js - Javascript Form Validation Library

By Swapnil Sarwe, Published on 11 Oct, 2011

I have been working on the javascript library to meet my everyday basic needs. dovalidate-js is the result of it.

Client side validation of form submission is very crucial and important. This is an attempt to create a dynamic library which will do the basic validation with some amount of configuration available to the user using it as per the requirement.

The main goal behind building the validator is to avoid playing with html form and let javascript do the validation and css highlight it.

So that it can be applicable to the already created form without touching it but by just configuring it through javascript and css.

Steps to use it: Step 1: Include a javscript file

<script type="text/javascript" src="scripts/dovalidate-0.1.js"></script>

Step 2: Create the instance of validator

var dovalidate = new SWAPJS.doValidate();

Step 3: Call the validator init function with appropriate parameters. The parameters foremost consists of the id of the HTML form which you want to validate. Second the set of ids of the elements which you want to validate with the type of validation you want to have on it.

dovalidate.init('form_id', {
   name: ['empty'], // Comment 1
   email: ['empty', 'email'], // Comment 2
   webpage: ['url'] // Comment 3
});

Comment 1: 'name' is the id of an element. 'empty' is the type of validation 'empty' is in other words required field, if 'name' field is empty form would not submit Comment 2: 'email' is the id of an element. 'empty' and 'email' are the type of validations if more than one type validation specified. then both the validation should pass so that form can be submitted Comment 3: 'webpage' is the id of an element. 'url' is the type of validation no 'empty' specified means, the field is not mandatory, but if it has some content it has to be of the specified type or else it wont submit

Example:

<script type="text/javascript" src="scripts/dovalidate-0.1.js"></script>
<script type="text/javascript">
	var dovalidate = new SWAPJS.doValidate();
	dovalidate.init('form1', {
		name: ['empty'],
		email: ['empty', 'email'],
		webpage: ['url'],
		comment: ['empty'],
		phone: ['digits']
	});
</script>

dovalidate-js: dovalidate-js demo dovalidate-js download

© 2021 Tails - Tailwindcss Page Builder

Instagram Twitter GitHub