How to reset password field after validation fails with inertia

Hi guys, I'm learning the inertia.js series. I want to clear password field after validation fails. I've tried onError, onFinish and onSuccess. But these're not working as I expected. Please would you help me....😢😢


<script>
import { useForm } from "@inertiajs/inertia-vue3";

export default {
  layout: null,
  setup() {
    const form = useForm({
      email: "",
      password: "",
    });

    const submit = () => {
      form.post("login", form, {
		// not working 😢
        onError: () => form.reset("password"),
	   // not working 😢
        onFinish: () => form.reset("password"),
       // not working 😢
        onSuccess: () => form.reset("password"),
      });
    };

    return { form, submit };
  },
};
</script>

anilkumarthakur60

4 years ago

Level 6

   <form @submit.prevent="login">
  <input     type="email" v-model="form.email"/>          
              <div class="invalid-feedback d-flex" v-if="form.errors.email">
                {{ form.errors.email }}
              </div>


 <input type="password" v-model="form.password" />
  <div class="invalid-feedback d-flex" v-if="form.errors.password">
                {{ form.errors.password }}
              </div>
<button type="submit" >Login</button>

</form>

    const form = useForm({
      email: null,
      password: null,
    });
    return {  form };
  },




  methods: {
    login() {
      this.form
        .transform((data) => ({
          ...data,
          remember: this.form.remember ? "on" : "",
        }))
        .post(this.route("login"), {
          onFinish: () => this.form.reset("password"),

          onSuccess: () => {
            this.$swal({
              icon: "success",
              title: "Login Successfully",
              showConfirmButton: false,
              timer: 1500,
            });
          },
        });
    },
  },

1 like

Ethan.

4 years ago

Level 6

@anilkumarthakur60 It's also not work for me sir.... I found this https://github.com/inertiajs/pingcrm/issues/26

    watch(
      () => form.errors,
      () => {
        form.reset("password");
      },
      {
        deep: true,
      }
    );

That works for me.... By the way, thanks for answering my question... 🧡

anilkumarthakur60

4 years ago

Level 6

its modified Login System .. app\Providers\FortifyServiceProvider.php

   Fortify::loginView(function () {
            return Inertia::render('Authentication/Login);
        });

it should work

1 like

Ethan.

4 years ago

Level 6

@anilkumarthakur60 Okay sir, Fortify package was not used in my project. I wrote Login System manually. When I will use Fortify, I will try that. Thank you so much sir 🧡

isimmons

3 years ago

Level 17

@Ethan. I'm doing this course now. I did

watch(form, () => {
    if(form.hasErrors)
        form.reset("password");
})

Thanks for the example

1 like

Ethan.

3 years ago

Level 6

@isimmons yeah bro great 😍, I miswrote the code.

	// before
    const submit = () => {
      form.post("login", form, {
		// not working 😢
        onError: () => form.reset("password"),
	   // not working 😢
        onFinish: () => form.reset("password"),
       // not working 😢
        onSuccess: () => form.reset("password"),
      });
    };

	// after
   const submit = () => {
      form.post("login", {
		// will work 😢
        onError: () => form.reset("password"),
	   // will work 😢
        onFinish: () => form.reset("password"),
       // will work 😢
        onSuccess: () => form.reset("password"),
      });
    };

we don't need form object as a second parameter and also we don't need to watch either anymore I didn't read the doc carefully 😁😁

1 like

isimmons

3 years ago

Level 17

@Ethan. Awesome. Thanks

1 like

Please or to participate in this conversation.