Vuelidate reset form after submission

[zspine]

Hi all,

I am using vuelidate library to validate the form and trying to reset the form after submission but for some reason it always highlights the fields with required fields. I am not sure why the reset is not working…

<template>
  <q-form ref="passwordChangeForm" @submit.prevent="submit">

    <validation-errors :violations="violations" message="Unable to complete your request"></validation-errors>

    <q-input
      ref="currentPassword"
      v-model.trim="$v.credentials.currentPassword.$model"
      type="password"
      label="Current Password"
      :rules="[
        val => $v.credentials.currentPassword.required || 'Current password is required'
      ]"
      autocomplete="turn_off_1"
    />

    <q-input
      ref="password"
      v-model.trim="$v.credentials.password.$model"
      type="password"
      label="New Password"
      :rules="[
            val => $v.credentials.password.required || 'New Password is required',
            val => $v.credentials.password.strongPassword || 'Password is required to be minimum 8 chars in length and to include at least one upper case letter and one number',
          ]"
      autocomplete="turn_off_2"
    />

    <q-input
      ref="confirmPassword"
      v-model.trim="$v.credentials.confirmPassword.$model"
      type="password"
      label="Confirm Password"
      :rules="[
            val => $v.credentials.confirmPassword.required || 'Confirm Password is required',
            val => $v.credentials.confirmPassword.sameAsPassword || 'Your password and confirm password does not match'
          ]"
      autocomplete="turn_off_3"
    />

    <div class="text-right q-mt-md">
      <q-btn unelevated label="Save" type="submit" color="accent" :loading="isLoading" />
    </div>


  </q-form>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { required, sameAs } from 'vuelidate/lib/validators';
import ValidationErrors from "components/form/ValidationErrors";
export default {
  name: 'AccountPasswordChange',
  components: {
    ValidationErrors
  },

  props: {
    user: {
      type: Object,
      required: true
    }
  },

  data() {
    const credentials = this.fields();

    return {
      credentials: {...credentials}
    }
  },

  validations: {
    credentials: {
      currentPassword: {
        required
      },
      password: {
        required,
        strongPassword:(password) => {
          return password.length >= 8 &&
            /[a-z]/.test(password) &&
            /[A-Z]/.test(password) &&
            /[0-9]/.test(password)
        }
      },
      confirmPassword: {
        required,
        sameAsPassword: sameAs('password')
      }
    },
  },

  computed: {
    ...mapGetters({
      isLoading: 'user/update/isLoading',
      violations: 'user/update/violations',
      error: 'user/update/error'
    })
  },

  methods: {
    ...mapActions({
      toggleLoading: 'ux/layout/toggleLoading',
      changePassword: 'user/update/changePassword',
      resetErrors: 'user/update/resetErrors'
    }),

    fields() {
      return {
        currentPassword: null,
        password: null,
        confirmPassword: null
      };
    },

    resetForm() {
      const credentials = this.fields();
      this.credentials = {...credentials}
      this.$nextTick( () => {this.$v.credentials.$reset();} );
    },

    async submit() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        this.$q.notify({
          message: 'Please correct the highlighted fields and try again',
          color: 'negative',
        });
      } else {
        this.resetErrors();
        const response = await this.changePassword(this.credentials);

        if(!this.error) {
          this.$q.notify({
            message: 'Password successfully changed',
            color: 'positive',
          });

          this.resetForm();
        }
      }
      return false;
    },
  },
}
</script>

Any suggestion or help greatly appreciated

[dobbel]

@zspine

I think you get better support for your question here:

https://github.com/vuelidate/vuelidate

[zspine]

@dobbel Thanks for the quick reply!! I guess than it’s nothing to do with quasar elements. Sure will try!!

[metalsadman]

@zspine you are mixing both rules, imo better go for one or the other. Check their API of vuelidate, there should be a function there that resets the states of your validation object, qform reset isn’t gonna do it since the models on your vuelidate are still dirty.

[zspine]

@metalsadman Thank you very much for the quick response and detailed response. As far as I checked ‘this.$v.$reset();’ is the function resets the form and also I have implemented the suggested solution from this issue and also tried with the data model values nothing seems to be working I will try this in a sandbox to find out if it’s conflicting with any other plugins or functions.

Thanks again for your detailed reply! Cheers

[zspine]

@metalsadman Thank you very much for guiding me in the right direction. Finally it worked after adding the quasar form reset… (vuelidate form reset not working as expected)

    resetForm() {
      const credentials = this.fields();
      this.credentials = {...credentials};

      this.$refs.passwordChangeForm.reset();
    },