jQuery + Bootstrap Validation Compatible Form Validator

jquery Bootstrap v4.0 Validation is a validation library based on jQuery. Bootstrap validation class can be used as an option.

Validate.js is an easy, dynamic, and extensible jQuery form validation plugin that uses Bootstrap form validation classes (or your CSS classes) to mark invalid form fields and display custom error messages.

Note: Produced based on jQuery 3.2.1 and Bootstrap v4.0.

How to make use of it:

1. Load the primary script validate.js the Bootstrap framework.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<script src="/path/to/src/validate.js"></script>

2. Apply validation guidelines to your form fields and define your individual error messages as follows.

var literal = {
    req1: { selector: $('#req1'), required: { message: 'Required Field.' } },
    req2: { selector: $('#req2'), digit: { message: 'Must be a digit.' } },
    req3: { selector: $('#req3'), length: { value: 3, message: 'Only 3 characters are allowed.' } },
    req4: { selector: $('#req4'), from: { value: 3, message: 'At least 3 numbers.' } },
    req5: { selector: $('#req5'), to: { value: 3, message: '3 numbers or less.' } },
    req6: { selector: $('#req6'), range: { value: [5, 10], message: 'From 5 To 10.' } },
    req7: { selector: $('#req7'), email: { message: 'Must be a valid email.' } },
    req8: { selector: $('#req8'), mobile: { message: 'Must be a valid phone number.\nEX) 01012341234' } },
    req9: { selector: $('#req9'), compare: { value: 'test', message: 'Must match the string: text.' } },
    req10: { selector: $('#req10'), date: { message: 'Must be a valid date.\nEX) 2021-01-12' } },
    req11: { selector: $('#req11'), regex: { value: /^[0-9]+$/, message: 'Custom validator using Regext.' } }
};

3. Initialize the plugin and finished.

var result = $.validate.rules(literal);
console.log(result);

4. Use the browser’s alert function to indicate error messages to customers.

var result = $.validate.rules(literal,{
    mode: 'alert'
});

5. Override the default CSS classes if you would like to use other CSS frameworks.

var result = $.validate.rules(literal,{
    mode: 'bootstrap',
    bootstrap: {
      feedback: 'invalid-feedback',
      error: 'is-invalid',
      success: 'is-valid'
    }
});

Bootstrap Compatible Form Validator, jquery Validation Plugin/Github


See Demo And Download

Official Website(psymonkey13): Click Here

This superior jQuery/javascript plugin is developed by psymonkey13. For extra Advanced Usage, please go to the official website.

Share