Call validate method manually

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]

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.

[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 )