Easy Form Validation Plugin For Bootstrap 4 - jQuery s-validatejs

s-validatejs is a super tiny jQuery plugin that provides the client-side form field validation for the latest Bootstrap 4 framework.

Validation rules supported:

• Email address.
• Password.
• Required field.
• Min number of required chars.

How to use it:

1. Import the jQuery s-validatejs plugin's script into your Bootstrap project.

<!-- Bootstrap files -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/query.min.js"></script>
<script src="/path/to/tether.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

<!-- jQuery s-validatejs -->
<script src="svd.js"></script>

2. Create a message container to display the success message when all the form fields are valid.

<div id="message">
  <div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You send message!
  </div>
</div>

<!-- jQuery s-validatejs -->
<script src="svd.js"></script>

#message{
  display: none;
}

3. Setup the form validation plugin and customize the error messages.

var settings = {

    // set #id for validation email
    emailID: '#inputEmail',

    // set text for validation email
    ErrorTextEmail: 'Enter valid email',

    // set #id for validation password
    passwordID: '#inputPassword',

    // set text for validation password
    ErrorTextPassword: 'Must be 7-20 characters long.',

    // set value required chars for validation password
    MinCharsPass: '7',

    // set #id for validation custom
    Custom: '#inputCustom',

    // set text for validation password
    ErrorTextCustom: 'Must be 5-20 characters long custom.',

    // set value required chars for validation custom form
    MinCharsCustom: '5'
    
}

Change log:

2017-08-06

• JS update

---

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