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!
William Beard 