Minimal Form Input Validation Plugin with jQuery - validate.js

File Size: 6.87 KB
Views Total: 3315
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Form Input Validation Plugin with jQuery - validate.js

validate.js is a small jQuery client-side form validation plugin that utilizes RegEx patterns to add validation with custom error messages to existing form inputs.

How to use it:

1. Load jQuery library and the jQuery validate.js at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.validate.js"></script>

2. Add validators to your form inputs via data-* attributes as follows.

<input type="text" data-require="email">
<input type="text" data-require="date">
<input type="text" data-require="phone">
...

3. Call the plugin on the form element to enable the validators.

$('form').validate();

4. Default settings.

type  : "standart", // or ajax
usesweetalerts : true,
success_texth : "Thank you!",
success_textp : "Your message has been sent!",
style_user : "",
style_base : "<style>.input_error{color:red!important;}</style>",
class_error   : "input_error",
validators : {
  reg : {
    email	  : /^([a-z0-9_\.\-\+]+)@([\da-z\.\-]+)\.([a-z\.]{2,6})$/i,
    url		  : /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/,
    phone	  : /^(\d|\+\d ?)?( )?\(?\d{3}\)?(-| )?\d{3}(-| )?\d{2}(-| )?\d{2}$/,
    date	  : /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,
    en  	  : /^[A-Za-z]+$/
  },
  text : {
    email   : "Please enter a valid email",
    url   : "For example: http://jQueryscript.net",
    phone   : "Please enter a valid phone number",
    date  : "dd/mm/yyyy",
    en    : "English only"
  }
},
callbacks : {
  // do something...
}

This awesome jQuery plugin is developed by Tom-Lo. For more Advanced Usages, please check the demo page or visit the official website.