Vuelidate reset form after submission



  • 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



  • @zspine

    I think you get better support for your question here:

    https://github.com/vuelidate/vuelidate



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



  • @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.



  • @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



  • @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();
        },
    

Log in to reply