Vue-form-generator: Validator: Field validated class

[lionel-bijaoui]

Hi @icebob @dflock @cristijora,

I need a validated state (class) for my fields.
I noticed in the source that there is a validationSuccessClass and by setting it with validationErrorClass, I can get a class that currently correspond to "no error".

But "no error" and "validated" don't have the same meaning.
A field should have 3 states : "normal", "error" and "validated".

With validateAfterLoad: false, validateAfterChanged: false, I want my field to be "normal" until I trigger a validation. Then all fields are either "error" or "validated".

With validateAfterLoad: false, validateAfterChanged: true, I want my field to be "normal" until I edit the field. Then this field is either "error" or "validated".

With validateAfterLoad: true, validateAfterChanged: false, I want all my fields to be either "error" or "validated" after initial load. They keep their state until I trigger a validation.

With validateAfterLoad: true, validateAfterChanged: true, I want all my fields to be either "error" or "validated" after initial load. They keep their state until I edit the field.

With this behavior, it will be possible to add a checkmark or anything I want next to each "validated" field. It will allow my users to see their progress on the from.

TL:DR The goal is to have a class that mean "I have been through the validation process at least once and I have no error"

How can we achieve that ?
I can do a PR if necessary but I wanted your opinion on the issue first.

Thank you !

[icebob]

Good idea. What is your suggestion?

[cristijora]

@lionel-bijaoui Totally agree that there should be a another state which is the "initial" state before validating a field.
I don't think the api should change (validationSuccessClass, validationErrorClass are fine as they are)
How do you want to set this intermediate state ? I looked real quick and I don't think there is a way to distinguish between a field with no errors and a field that has been validated and has no errors.

[lionel-bijaoui]

I was thinking of using abstractField.js to add a data property vfg_ValidationState that track if the field have been run through the validator. At first, it is false and if the method validate is run, this property change to true.
The next change is in formGenerator, the method getFieldRowClasses need to change to use that new property to decide if it can apply an error or success class or no class at all.

// formGenerator.vue
methods: {
    // Get style classes of field
    getFieldRowClasses(field) {
        const hasErrors = this.fieldErrors(field).length > 0;
        let baseClasses = {
            error: hasErrors,
            disabled: this.fieldDisabled(field),
            readonly: this.fieldReadonly(field),
            featured: this.fieldFeatured(field),
            required: this.fieldRequired(field)
        };

        let { validationErrorClass, validationSuccessClass } = this.options;
        if (validationErrorClass && validationSuccessClass) {
            if (fieldInitial) {
                baseClasses[validationErrorClass] = false;
                baseClasses[validationSuccessClass] = false;
            } else {
                if (hasErrors) {
                    baseClasses[validationErrorClass] = true;
                    baseClasses.error = false;
                } else {
                    baseClasses[validationSuccessClass] = true;
                }
            }
        }

        if (isArray(field.styleClasses)) {
            each(field.styleClasses, (c) => baseClasses[c] = true);
        } else if (isString(field.styleClasses)) {
            baseClasses[field.styleClasses] = true;
        }

        baseClasses["field-" + field.type] = true;

        return baseClasses;
    },

    /* ... */

    fieldInitial(field) {
        return field.vfg_ValidationState;
    },

    /* ... */
}

[cristijora]

Seems ok. I would probably give it a different naming
Usually the following naming is used in many validation libraries

• touched -> true/false (Whether at least one modification was made to the field)
• valid -> true/false (whether field is valid or not)

[lionel-bijaoui]

Since this is used by all fields, I think we should at least namespace the internal properties with vfg or something like that.
So with your proposition, that would create vfgTouched and vfgValid (or vfg_touched and vfg_valid).
Is that ok for you @cristijora ?

[cristijora]

That's fine I guess

[lionel-bijaoui]

@icebob I have a hard time making this work.
getFieldRowClasses use a field but it is the schema definition of the field, not the Vue object itself.
You seem to save errors in a big array in formGenerator, and use that to access the good error by comparing the fields.

[icebob]

What is the status of this? Still in progress?

[lionel-bijaoui]

Hello @icebob , I've been extremely busy at work.
I will try to catch up with the updates, and see if what I did at that moment is still working now.
I have some catching up to do !