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

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

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

Methods

validateSection

validator.validateSection('section_1');

Events

submit-valid

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

submit-error

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

validate-section

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
})