sx-vue-form-validator v0.3.6

Sibirix Vue Form Validator

RU | EN

Vue component properties (data etc) validation library

License

MIT

Install

npm i sx-vue-form-validator

Usage example

import { Component, Vue, Mixins } from 'vue-property-decorator';

import FormValidate, {Validate, required, email} from 'sx-vue-form-validator';

@Component
export default class Form extends Mixins(Vue, FormValidate) {

    @Validate({required})
    name: string = '';

    @Validate({required, email})
    email: string = '';

}

Using @Validate decorator

Pass to the @Validate object in the following form:

{ruleName: (val) => true|string}

@Validate({required})
name: string = '';

Passed validators are computed with AND logic

Built-in validators

Custom validator

Custom validator function may be passed in to the validator's decorator. The function must return true if validation is successfull or error message in case of validation error. The context of the function - Vue component, validator is set up on.

function myValidator(this: Vue, val: string): true | string {
    return val.length >= this.minLength ? true : `Minimum length - ${this.minLength}`;
}

Custom error messages

Custom messages dictionary may be passed as an message argument to the validator decorator

{
    rules: {ruleName: validator},
    message: {
        ruleName: 'custom message'
    }
}

@Validate({rules: {required, phone}, message: {required: 'Please, specify contact phone'}})
phone: string = '';

validation object

validation object is available via component data-property

validation.getField(name): TValidatorFieldState | undefined

Field current validator state. Returns object:

{
    "_active": true,
    "valid": false,
    "rules": {
        "required": {
            "active": true,
            "valid": true,
            "error": "",
            "message": null
        }
    },
    "fieldName": "name"
}

validation.validateField(fieldName): TValidatorFieldState | undefined

Validate specified field

validation.getFieldValid(fieldName: string): boolean

Get specified field validation result

validation.customError(fieldName: string, error: string): void

Set field custom error. Used for displaying server-side validation messages

validation.isValid(): boolean

Runs all fields validation. Returns false, if any of the field's validation is invalid. Used as a guard for form submitting

validation.fieldMessages(name: string): string[]

Get field's validation error messages (if any invalid)

validation.firstFieldError(name: string): string | undefined

Get field's first error (multiple validator rules)

validation.setValidator(name: string, validatorFunctions: TValidatorRuleSet): void

Set field's validator rules

const validatorFunctions = {
    ruleName: validationCollback
}

validation.forgetValidator(name: string, ruleName: string): void

Remove field's validator rule

validation.clearErrors(): void

Clear all fields errors

validation.clearFieldErrors(name: string): void

Clear field's errors

validation.activate(): void

Activate validator

validation.deactivate(): void

Deactivate validator

Events

validator.field.valid

Successfull field validation. Argument:

{   
    field: string, 
    state: TValidatorFieldState 
}

validator.field.invalid

Failed field validation. Argument:

{   
    field: string, 
    state: TValidatorFieldState 
}

validator.valid

Successfull validation (all fields). Argument: validation object (validator itself)

validator.invalid

Failed validation (any of the fields). Argument: validation object (validator itself)

validator.firstInvalid

Emited when validation is failed. Argument - name of the first invalid field

Example

<template>
    <div>
        <form>
            <div>
                <label for="name">Employee name</label>
                <input id="name" type="text" v-model="name">
                <div class="error" v-if="!validation.getField('name').valid">
                    {{ validation.firstFieldError('name') }}
                </div>
            </div>

            <div>
                <label for="phone">Employee phone</label>
                <input id="phone" type="tel" v-model="phone">
                <div class="error" v-if="!validation.getField('phone').valid">
                    {{ validation.firstFieldError('phone') }}
                </div>
            </div>
        </form>
    </div>
</template>


<script lang="ts">
    import { Component, Vue, Mixins } from 'vue-property-decorator';
    import FormValidate, { Validate, required, phone } from 'sx-vue-form-validator';

    function myValidator(this: Vue, val: string): true | string {
        return val.length > this.minLength ? true : `Minimum length - ${this.minLength}`;
    }

    @Component
    export default class Form extends Mixins(Vue, FormValidate) {

        minLength = 5
        
        mounted() {
            this.$on('validator.valid', () => {
                console.log('Form is valid');
            })
        }

        destroyed() {
            this.$off('validator.valid');
        }

        @Validate({required, myValidator})
        name: string = '';

        @Validate({rules: {phone}, message: {phone: 'Please, enter employee contact phone'}})
        phone: string = '';
    }
</script>