Validate Form Data Using Regex - jQuery ManyaJS
File Size: | 57.7 KB |
---|---|
Views Total: | 681 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ManyaJS is a lightweight, extensible, flexible form validator that has the ability to validate form controls using Regex.
Features:
- Supports live editing.
- Custom error messages.
- Predefined Regex: email, mobile, password, name, image, dob, etc.
How to use it:
1. To use this plugin, include the JavaScript manya.js
after jQuery.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <link href="style/manya.css" rel="stylesheet"> <script src="dist/manya.js"></script>
2. Add the Required validator to input fields using the following val-type
attributes:
- val-type="text"
- val-type="file"
- val-type="radio"
- val-type="check"
- val-type="select"
<input type="text" name="name" val-type="text">
3. Add Regex based validators to your input fields:
<input type="text" name="name" val-type="text" regex="name">
4. Customize the error messages.
<input type="text" name="name" val-type="text" regex="name" val-error="Your name is required" regex-error="Your name can contain only charactors">
5. Create an empty container next to the input field that will hold the error message when the input field is invalid.
<input type="text" name="name" val-type="text" regex="name" val-error="Your name is required" regex-error="Your name can contain only charactors"> <span class="help-block"></span>
6. Call the plugin on the submit button to validate the form on submit.
<button type="submit" id="btnSubmit">Submit</button>
$('#btnSubmit').manya();
7. Extend the form validator in the JavaScript.
$('#btnSubmit').manya({ regex: { email: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, mobile: /^[6789]\d{9}$/, password: /^[A-Za-z0-9]+$/, name: /^[a-zA-Z]*$/, image: /([/|.|\w|\s|-])*\.(?:jpg|gif|png)/, dob: /^\d{4}\-(0?[1-9]|1[012])\-(0?[1-9]|[12][0-9]|3[01])$/ } });
This awesome jQuery plugin is developed by jitangupta. For more Advanced Usages, please check the demo page or visit the official website.