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 10 months ago
Vue
2 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Lauris Stepanovs Author10 months 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.
user
Mateus Bonadiman 10 months ago
Thank you!
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle