Easy Form Validation Plugin For Bulma Framework

Bulma is a modern, flexible, modular, and fully responsive CSS framework for fast web & mobile developement.

The Bulma Form Validator plugin provides an easy solution for validating any form fields in your Bulma powered web project, with support for custom error messages and validation rules. Have fun with it.

How to use it:

1. To use this plugin, make sure you have the latest Bulma framework installed in your document.

<link rel="stylesheet" href="/path/to/cdn/bulma.min.css" />

2. Import both jQuery library and the Bulma Form Validator plugin into the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/bulma-validator.js"></script>  

3. Insert form fields into your document and define the helper text (error message when invalid) to the bottom of each form field.

<div class="field">
  <label class="label">Name</label>
  <div class="control>
    <input class="input" type="text" placeholder="Text input" data-validation="name">
  </div>
  <p class="help is-danger">Type your username here</p>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="Email input"  data-validation="email">
  </div>
  <p class="help is-danger">This email is invalid</p>
</div>

4. Enable the form validator on your HTML form. That's it.

$(function() {
  $("form").BulmaValidator({
    name: "BulmaValidator"
  });
});

5. By default, the plugin comes with 2 rules to validate username and email fields in the HTML form. Feel free to create your own validation rules using regular expression as follows:

$("form").BulmaValidator({
  name: "BulmaValidator",
  fields: ["text", "email"],
  settings: {
    text: {
      regex: "^[A-Za-z ,.'-]{3,35}$"
    },
    email: {
      regex: "^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
    }
  }
});

6. Override the default CSS classes. You can find all modifier classes here.

$("form").BulmaValidator({
  classes: {
    danger: "is-danger",
    success: "is-success",
    helptext: "help"
  }
});

---

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