formValidator.js – Simple jQuery form validation plugin

Made my first jQuery plugin for validating forms on the front-end, before submit. It has some options as well to make it more flexible for your needs.

To use the plugin, please download the source from my github repo: https://github.com/wbeard/formvalidator

I plan on adding more to it. Here are some things to cover:

To Use:

import jQuery 1.72 js file

import validate.js file

link validate.css file

attach to desired form (e.g. $(“selector”).formValidator();

can take options such as background & color for customization (e.g. $(“selector”).formValidator({ “background”: “red”, “color”: “white” });

when you define a dom element add the appropriate classes for validation to happen on change or keyup, whichever is defined in the plugin

Classes:

required – defines required input

numeric – requires numeric input

phone – masks text with (###) ###-####

date – masks text with date mm/20yy

card – accepts only 3,4,5, or 6 as valid first character and determines appropriate max length of cvv input box and itself

email – simple regex expression being checked against

Options:

background – Sring value. Background of tooltip, default is transparent

color – String value. Font color of tooltip, default is red

orientation – String value.  Position of tooltip. Valid options are right, top, left, or bottom. Default is right.

disableSubmit – Boolean. Determines whether submit button associated with selected form should be disabled until all fields are valid. Default is true.

excludedList – If there are other buttons being selected and you would like to explicitly not select them, pass them in an array,  with a jQuery selector, e.g. $(“.selector”)

Feel free to check out the source or fork at https://github.com/wbeard/formvalidator/

I’ll be making this more scalable and easy to use. Its been made more specifically for an .aspx page for collecting payments, so some of its quirks were caused by the quirks of creating jQuery for aspx & .net. I’ll be making a more generic approach and will update accordingly.

Thanks!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s