Nuxt•3mo ago

form resetting after submission

Hey folks here is my code for login page

12 Replies

Hi @Aditya Kirad. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- If your form is resetting after submission on your Nuxt login page, this is actually the default behavior for many form implementations, including the Nuxt UI UForm and UAuthForm components, as well as standard HTML forms. After a successful submission, the form state is often cleared to provide a fresh form for the user. How to prevent or control form resetting: - If you are using a custom form (like in the Nuxt authentication recipe), the form state (credentials in the example) will only reset if you explicitly clear it in your code. In the provided example, the state is not reset automatically, so unless you set credentials.email = '' and credentials.password = '' after a successful login, the values will remain:

  <script setup lang="ts">
  const credentials = reactive({
    email: '',
    password: '',
  })
  async function login() {
    $fetch('/api/login', {
      method: 'POST',
      body: credentials
    })
    .then(async () => {
      // Refresh the session and redirect
      await refreshSession()
      await navigateTo('/')
      // If you want to reset the form, do it here:
      // credentials.email = ''
      // credentials.password = ''
    })
    .catch(() => alert('Bad credentials'))
  }
  </script>

  <script setup lang="ts">
  const credentials = reactive({
    email: '',
    password: '',
  })
  async function login() {
    $fetch('/api/login', {
      method: 'POST',
      body: credentials
    })
    .then(async () => {
      // Refresh the session and redirect
      await refreshSession()
      await navigateTo('/')
      // If you want to reset the form, do it here:
      // credentials.email = ''
      // credentials.password = ''
    })
    .catch(() => alert('Bad credentials'))
  }
  </script>

If your form is resetting, check if you have code that clears the state after submission. If you want to keep the values, simply do not reset them after a successful login. - If you are using Nuxt UI's UForm or UAuthForm, the form state is managed internally. By default, these components do not automatically reset the form after submission. If you want to reset the form, you can use the exposed clear() method on the form ref, but you have to call it manually. Otherwise, the form will retain its values after submission unless you programmatically clear them yourself. See the Expose section of the UForm docs for more details. Summary:
If your form is resetting after submission and you don't want it to, check your code for any manual state clearing. Nuxt and Nuxt UI forms do not reset automatically unless you tell them to. If you want to reset the form, use the clear() method or manually clear your state; if you want to keep the values, simply avoid clearing them after submit. If you need more specific help, please share the relevant part of your code where the form state is managed and submitted. References:
- Nuxt Sessions and Authentication Recipe - UForm Expose API ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@756105226561388596> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Aditya KiradOP•3mo ago

@kapa.ai I'm using the Form component from shadcn-vue

message.txt

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources provided do not contain any information about the "Form" component from shadcn-vue. My expertise and available documentation are focused on Nuxt and its official UI components, such as UForm from Nuxt UI. If you have questions about Nuxt or its UI components, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@756105226561388596> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi Plug•3mo ago

Don't you want it to reset the form after succesful submission? then just redirect them to the right page or close the login modal

Aditya KiradOP•3mo ago

off course I want to reset the form but if I'm doing some action server side and I don't get the expected result then I will like to throw the error in display it as form error like in my case what I'm doing is get the email and password and submit the form then on server side I will check if user with that email exist or not if not I will throw error that it it invalid email or password etc. Hey @WiFi Plug you there

WiFi Plug•3mo ago

yeah I use zod for validation but i use the nuxt ui forms. but i do the same thing you do where my server side checks for say if a password is too weak and returns an error. which works correctly where it doesn't reset the form until there's no error on submission haven't tried shadcn so idk if there's some difference there

Aditya KiradOP•3mo ago

does the next ui forms also use vee validate

WiFi Plug•3mo ago

https://ui.nuxt.com/components/form

Nuxt UI

Vue Form Component - Nuxt UI

A form component with built-in validation and submission handling.

WiFi Plug•3mo ago

im a beginner still but i dont think it uses vee validate? just zod or other packages unless vee validate is a part of zod or something

Aditya KiradOP•3mo ago

hmm it's not using the vee validate'

Gaming

Programming

form resetting after submission

Did you find this page helpful?