Validation

Run validation on FormRenderer

Introduction

Vue Form Builder built-in validation is strongly inspired by Laravel's Validation Facade. Which basically, you add some rules to your field. And the Validation Process will check it all.

Available Rules

required

The field must have select/input some data.

min:{number}

The minimum value for the field, depends on each data types, it will check:

• Array: at least had {number} length.

• String: at least had {number} string length.

• Number: at least more than/equal {number}

max:{number}

The maximum value for the field. Data types work as same as min

isEmail

The input value must be an email

regex:{rule}|{flag}

The input value must pass the custom regex rule.

The input must be provided like this format: {regexRuleString}|{flag}

Note: regexRuleString must not contain the / (slash) at the beginning and the end

Example: ^[0-9]+$|g

sameAs:{field}

The input field value must be as same as {field} value.

customClosure:{func}

(Extension) The input field value must pass after the {func} ran. Use it for your custom validation.

Create a validation function

Vue Form Builder will run your function and pass these data into it:

/**
* My custom validation for my field
* @param {any} fieldValue - Current field value
* @param {Object} valuesContainer - All field values
* @returns {boolean}
*/
function myCustomValidation(fieldValue, valuesContainer) {
    return fieldValue === "Seth Phat";
}

Your custom validation function must return a Boolean value.

Inject the function when registering the VueFormBuilderPlugin:

Vue.use(VueFormBuilderPlugin, {
    validationClosures: {
        'sethPhatCustomCheck': myCustomValidation // must pass it as First-class
    }
})

Finally, define it in your field's validation: