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
   
Validate Form Data Using Regex - jQuery ManyaJS

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.