Vue-form-generator: Example how to configure a custom validator

[zopyx]

In our case the form schema is loaded through AJAX and a field defines a validator like

  validator: 'my_validators.is_int'

I have a my_validators.js file which is loaded from the HTML (no JS packaging involved) like

<script type="module" src="my_validators.js"></script>

How can I attach/export my implementation of is_int()

function is_int(value) {
   // do something
}

as module in order to make it visible to VFG?

[zoul0813]

To pass a string, you would need to add the new function to the VueFormGenerator.validators ... depending on how you implemented VFG in your project, this could be done like below.

This also allows you to override any of the built-in validators with your own custom validator by just replacing it. So you could just replace the 'integer' validator with the custom 'is_int' by overwriting the VueFormGenerators.validators.integer function with your custom is_int validator.

I've also added an example of how you can override the validator messages as well, in reference to your i18n issue.

import VueFormGenerator from "vue-form-generator";

VueFormGenerator.validators.resources.textTooSmall = "Too short, should be {0} and is {1}";

VueFormGenerator.validators.is_int = function(value, field, model) {
    if(true) {
    return ["Is not an intenger"];
  }
  return [];
}

In your schema, you would then just refer to "is_int" instead of "my_validators.is_int"

Here's a JSFiddle showing this.

The complete list of validator messages can be found in src/utils/validators.js, here's a copy of it below ... you can just create your own version of this and replace the entire resources object with your locale specific version ...

let resources = {
    fieldIsRequired: "This field is required!",
    invalidFormat: "Invalid format!",

    numberTooSmall: "The number is too small! Minimum: {0}",
    numberTooBig: "The number is too big! Maximum: {0}",
    invalidNumber: "Invalid number",
    invalidInteger: "The value is not an integer",

    textTooSmall: "The length of text is too small! Current: {0}, Minimum: {1}",
    textTooBig: "The length of text is too big! Current: {0}, Maximum: {1}",
    thisNotText: "This is not a text!",

    thisNotArray: "This is not an array!",

    selectMinItems: "Select minimum {0} items!",
    selectMaxItems: "Select maximum {0} items!",

    invalidDate: "Invalid date!",
    dateIsEarly: "The date is too early! Current: {0}, Minimum: {1}",
    dateIsLate: "The date is too late! Current: {0}, Maximum: {1}",

    invalidEmail: "Invalid e-mail address!",
    invalidURL: "Invalid URL!",

    invalidCard: "Invalid card format!",
    invalidCardNumber: "Invalid card number!",

    invalidTextContainNumber: "Invalid text! Cannot contains numbers or special characters",
    invalidTextContainSpec: "Invalid text! Cannot contains special characters"
};

import VueFormGenerator from "vue-form-generator";
VueFormGenerator.validators.resources = myCustomResourceStrings;

[zopyx]

This was too easy. Thanks.

[jaywilburn]

What about if you're getting your data from a service and each form element has it's own errorMessage property with a special string value, how would I be able to add that errorMessage to my custom validator?

[vahidalvandi]

not work for me !!

[wenzhixin]

@vahidalvandi

const resources = {...}
Object.assign(VueFormGenerator.validators.resources, resources)