fields that become visible do not follow 'required' criteria unless interacted with

[rublev]

• I'm submitting a ...
  • bug report

• Do you want to request a feature or report a bug?

bug

• What is the current behavior?

field1 and field2 should have red required error styles on visibility being triggered. this is because they are required and the submit button shouldn't light up only when 'employed' is selected, but if all 3 fields have values

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

https://jsfiddle.net/wntxo4h5/

• What is the expected behavior?

red error styles applied to field1 and field2 + the submit button not being enabled

• What is the motivation / use case for changing the behavior?

needing all fields to be required when marked required and generating errors if not filled out

• Please tell us about your environment:

2.3.2 vue form gen
chrome mac Version 70.0.3538.77 (Official Build) (64-bit)
language: es6 js

• other:

love this library, incredible work by everyone

[zoul0813]

I’ll habe to review the logic when I’m at my desk, but I assume this happens because the field isn’t visible and is skipped for validation on load. Changing the visibility doesn’t trigger another validation... but you could force a validation check in your visible function, after toggling the visibility.

Will try to review in the morning.

[rublev]

hey thanks for the quick reply, same with my other thread, huge help :)

but you could force a validation check in your visible function, after toggling the visibility.

i've been trying to figure out how to do that but don't know how lol, i get infinite loops (probably because of my vuex integration)

i tried doing that via this.$refs.form.validate() inside visible, but is there a way to do it on per-field or something, or on itself only (itself being the field)? i'll have to try again without vuex

edit:

tested with this.$refs.form.validate() inside the visible function of both field1 and field2 and i get infinite loops - https://jsfiddle.net/wntxo4h5/3/

[zoul0813]

OK, so the problem I see here is that you are including the two hidden fields in the schema and flagging them as required. Because they aren't visible, they are ignored by the validation checks.

As your schema is dynamic, and those fields are only available when you select a specific option ('Employed'), the fields should be added to the schema after the model has been updated ... and just configured to be visible all the time.

I forked your Fiddle and updated it to use a computed schema and a watcher, to accomplish building a dynamic form that reacts to changes... it also re-validates the form after the schema has been updated. I also added an additional option for the 'Retired' status ... to show how the form can alternate between X, Y and Z states.

Fiddle Here

The main idea is here:

computed: {
    schema() {
        console.log('running schemaFields computed field');
        let fields = [];
        fields.push({
            type: 'select',
            label: 'Status',
            model: 'status',
            values: [
                'Employed',
                'Self Employed',
                'Retired',
                'Unemployed',
                'Student',
            ],
            selectOptions: {
                noneSelectedText: 'Select Your Employment Status',
            },
            required: true,
            validator: VueFormGenerator.validators.string,
        });
        if(this.model.status == 'Employed') {
            fields.push({
                type: 'input',
                inputType: 'text',
                label: 'field1',
                model: 'nested.field1',
                required: true,
                validator: VueFormGenerator.validators.required,
            });
            fields.push({
                type: 'input',
                inputType: 'text',
                label: 'field2',
                model: 'nested.field2',
                required: true,
                validator: VueFormGenerator.validators.required,
            });
        }
        fields.push({
            type: 'submit',
            buttonText: 'Submit Form',
            onSubmit: this.nextStep,
            disabled() {
                return this.errors.length > 0
            }
        });
        
        return {
            groups: [
                {
                legend: 'test',
                fields: fields
              }
            ]
        };
    }
},
watch: {
    schema(newVal, oldVal) {
    console.log('running schema watcher...', newVal == oldVal, newVal, oldVal);
    if(newVal != oldVal) {
        this.$nextTick(() => {
            this.$refs.vfg.validate();
      });
    }
  }
},
data() {
    return {
        model: {
            status: null,
          nested: {
            field1: null,
            field2: null
          }
        },
        formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true
        }
    };
},

This is a simple example, for a very basic form ... if the form is more advanced and has a lot of dynamic options, then I'd recommend building out a much more elaborate class that was capable of merging multiple "sub-schemas" together ... I do something similar when building forms for my application, where I have a series of data that are all based on the same base class, but have their own nuances ... instead of having 5+ schemas that are mostly identical, I built a custom schema parser that was able to load the "base schema" and then merge the "sub schema" into it.

[zoul0813]

@rublev can this be closed now?

[rublev]

yeah it actually worked perfectly, but I found that with really complex schemas the code gets complex quickly and i don't have the time/expertise to abstract it away into base class etc. thanks a lot btw.

for a solution all i did was have it like i do before, except i turn off validation after load so i don't get all the ugly red boxes onload. then as the user interacts with the hidden fields once they're visible, validation is triggered, along with onsubmit, which is perfect for my use case.

thanks