Vue-form-generator: Call validate method manually

[wunderdojo]

I have a page with several VFGs on it. I use ref for one of them like so:

<vue-form-generator
    :schema="schema"
    :model="member"
    :options="schema.formOptions"
    ref="newMemberForm"
 > 
</vue-form-generator>

Then in the onClick function of the button that I would like to trigger validation I tried variations of:

this.$refs.newMemberForm.validate()

$refs.newMemberForm is correctly referencing the VFG and if I add an @validated property I can see that the validate method is getting called but it doesn't actually validate the form -- as in empty required fields don't show any error message, etc. Using the built in submit button works as expected.

Am I missing something or is this not the right way to go about it?

Thanks.

[wunderdojo]

As a hacky work around for the moment I'm making it work this way.

The button I want to trigger validation is bound to a method called addMember().

In the form I'm using the built in submit button but hiding it via CSS.

In addMember() I'm manually triggering it like this:

  let submitButton = this.$refs.newMemberForm.$children.slice(-1)[0].$el;
      submitButton.click();

Would love to know if there is a better way to achieve this.

[zoul0813]

@wunderdojo are you only having problems with required validation?

I created an example that appears to work as I'd expect it ... JsFiddle Example

The same validation errors are displayed when you click either "Submit" or "Validate", the "Validate" button is outside of VFG and the "Submit" button is a "submit" field inside the VFG schema.

I'm using the same this.$refs.vfg.validate() logic you described above.

However, there is a small "gotcha" with the required validation ... the field's schema has to have required: true, if not the min/max values for string validation are ignored as an empty string is still considered valid (ie; optional, if provided it must be between min and max length though).

[bary12]

@zoul0813 does this also work if there are multiple vfgs in the page?

[zoul0813]

@bary12, Can’t see why not...

[bary12]

@zoul0813, @icebob seemed to suggest in #139 that it might cause some problems.

[wunderdojo]

@zoul0813 -- That's what I was running into, the fields weren't marked required true. I ended up doing a hybrid approach for now. In case this helps anyone else, here's what I'm doing.

I've got a user account screen that uses multiple small forms. For example, if they want to update their password that opens a form with password and confirm password fields. For that form I set required = true on those fields. My custom submit button then has the following in the method that gets triggered when you click it:

      //- manually trigger form validation
      this.$refs.editPassForm.validate(); 

      if( ! this.isValid ){ return; }

The isValid bit refers to a data property which is initially set to false. I use the @validated action on the password form to call a simple method that checks the valid state of that form:

    validateForm( isValid, errors ){
      this.isValid = isValid;
    },

That validateForm method is shared across all forms on the page. Each time you try to submit one it validates that particular form and stops if it isn't valid. If it is the form gets submitted and after the response this.isValid gets set back to false, meaning no forms can be submitted until they've been validated.

I have another form for editing contact info. For that one I have fields that I don't want to be required initially -- some are set to be required based on other selections, etc. So for that one I used the approach I initially posted -- using the built in submit button, hiding it via CSS and then manually triggering it so that form validation occurs.

It's not quite as clean as I'd like. Would be nice to have a way to validate a form manually that eval'd all of the validation rules, not just the required ones, but it's still miles better than the jQuery I was using before.

One other thing I implemented that might help someone else is reset buttons that return the form fields to their original values (if there's a built in way to do this I didn't find it).

The user account data is loaded like so:

  beforeMount () {
    //- grab the account details via REST API call
    this.$store.dispatch ( 'fetchAccount', acct_id )
      .then( response => {
        //- make a local copy of the initial account data so we can reset forms
        this.$data.initialState = JSON.parse( JSON.stringify( response ) )
      } );

  },

So when I fetch it I copy it to an initialState object. Using JSON.parse(JSON.stringify()) makes that copy non-reactive (vs if you did this.$data.initialState = response then initialState would also reflect any changes you make). *Note: It seemed to only make it non-reactive for top-level properties. Some of the properties were arrays and those did maintain reactivity so I used Object.assign when resetting them. So in my reset methods I can simply set the model values back to what they were originally like so:

Object.assign( this.account.user_name, this.initialState.user_name )

[zoul0813]

@wunderdojo is this issue resolved?

[wunderdojo]

@zoul0813 I guess that depends on what you mean by resolved. There still (afaik) isn't a way to manually trigger all validation rules on a form, only the ones marked as required. Maybe I should be making a feature request for that? This isn't a problem per se, just a question about expected functionality, so in that sense I guess it is resolved since there isn't a pending action item.

[zoul0813]

@wunderdojo not entirely sure I understand, if you call the validate() method on the VFG instance, it calls the validation functions on each field ... whether or not they are valid is determined by the validation rules, and for required to be considered the schema has to mark the field as required. An empty string will validate if the field is not marked as required.

I don't see a "feature" in this request? I could be missing something here, so if there's a feature request ... please elaborate, and we can open a new issue isolating that feature request.

[wunderdojo]

I was referring to this, but I think I just hadn't read it closely enough: "However, there is a small "gotcha" with the required validation ... the field's schema has to have required: true, if not the min/max values for string validation are ignored as an empty string is still considered valid (ie; optional, if provided it must be between min and max length though)." I'm using custom validation rules in those cases now. Thanks.