bulma-validator

Form validation for Bulma.css

Unless imported as module BulmValidator requires JQuery

You can set custom validations containing patterns, messages, callback methods and async methods.

HTML

Validation is applied to the field through the data-validation attribute ```html

Phone number

This is a help text

```

Configruation

const config = {
    form: '#main-form', // form selector
    lazy: true,  // if set to true validation will be executed only when the form is submitted
    scroll: true, // scroll to error
    requiredMessage: 'Required field',
    successIcon: 'fas fa-check',
    errorIcon: 'fas fa-exclamation-triangle',
    sections: { // each section contains an array of field names
        section_1: ["amount"], 
        section_2: ["gender","first_name","last_name","phone_number","email","address","province"]
    }
    classes: { 
        danger: "is-danger", // class applied to input on passed validation
        success: "is-success", // class applied to input on failed validation
        helptext: "help" // selector for validation text
		}
};

Validations

May contain rules (object array), async (async method), callback (simple method)

Bundled validations: number - float - email - url - strongPassword

const validations = { 
    cell: {
        rules: [
            {
                regex: /^((00|\+)\d{2}[- ]?)?3\d{8,9}$/,
                message: 'Insert a valid phone number'
            }
        ]
    },
    server: {
        async:
            {
                method: serverRequest, //custom method ,
                message: 'Error retrieving data from server'
            }
    },
    address: {
        callback: {
            method: checkAddress, //custom method
            message: 'Select an adress from Google autocomplete options' 
        }
    },
    zip: {
        rules: [
            {
                regex: /^[0-9]{5}/,
                message: 'Invalid Zip code'
            }
        ],
        callback: {
            method: checkZip, //custom method
            message: 'Zip code not present in list' 
        }
    }
};

Initialization

var validator = new BulmaValidator(config,validations);

Helper classes

only-num

allows only the input of numbers ```html ```

Methods

validateSection

validator.validateSection('section_1');

Events

All events are triggered on the form element

submit-valid

validation passed on form submit

validator.form.on('submit-valid',(e) => {
    ...your code here
}) 

submit-error

validation failed on form submit

validator.form.on('submit-error',(e) => {
    ...your code here
}) 

validate-section

section validation start

validator.form.on('validate-section',(e,sectionName,sectionValue) => {
    ...your code here
}) 

validate-section-valid

validator.form.on('validate-section-valid',(e,sectionName,sectionValue) => {
    ...your code here
}) 

validate-section-error

validator.form.on('validate-section-error',(e,sectionName,sectionValue) => {
    ...your code here
})