Basic jQuery Form Validator Using Regular Expressions - validex.js

File Size: 8.54 KB
Views Total: 2990
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic jQuery Form Validator Using Regular Expressions - validex.js

validex.js is a really small jQuery form validation plugin which highlights the form fields when the values typed by the user are invalid. The validation rules are fully customizable via regular expressions.

How to use it:

1. Include the validex.js script after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/validex.min.js"></script>

2. Call the function on the target input field and create your own validation rule using regex.

$('#my-input').validex({
  pattern: '^[a-zA-Zа-яА-Я\\s]+$',
  target: '#my-input'
});

3. By default, the plugin will automatically adds the CSS class 'error' to the invalid input field so that you're able to apply any CSS styles as follows:

.error { ... }

4. Replace the default 'error' classname.

$('#my-input').validex({
  pattern: '^[a-zA-Zа-яА-Я\\s]+$',
  target: '#my-input',
  className: 'has-error'
});

5. The plugin provides 4 callback functions you might find useful.

$('#my-input').validex({
  onValid: function(elem){},
  onNotValid: function(elem){},
  onBefore: function(t){},
  onAfter: function(t){},
});

6. You can also apply the validation rule to a specific input field using data-validex attribute like this:

<input type="text" data-validex="^@([A-Za-z0-9_]{1,15})+$" id="my-input">

Change log:

2017-06-05

2016-10-04

  • added 'change' event.

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