Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Strange behavior of error messages in multi-step sign up fields


Hi,

In multi-step sign up, using Vue, the error messages under the required fields appear without the user even making a mistake or trying to step forward.

This behavior only happens in the wizard (multi step), and in the other forms we can control this visibility.

I'm trying to adjust this behavior. How do I hide these error messages until the user makes a mistake?

Thanks,
Mateus

PS. You can check in: https://preview.keenthemes.com/metronic8/vue/demo6/?_ga=2.216620246.1771919593.1657711031-268211079.1657711031#/multi-step-sign-up

The "Account Name is a required field" appears without any mistake.


user
Mateus Bonadiman 3 years ago
Vue
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Mateus Bonadiman 3 years ago

Thank you!


user
Lauris Stepanovs Author 3 years ago

Hi Mateus,

Sorry for the delay with reply.

It is an error, inside handleStep function before all logic you need to call resetForm function as shown below.


const handleStep = handleSubmit((values) => {

      resetForm({

        values: {

          ...formData.value,

        },

      });

      ....

}


Already fixed this in Metronic demos, fix will be available in the next release.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(