Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Message of type warning, success and error does not show up inside Form.

See original GitHub issue

I noticed that Message of type warning, success and error won’t be displayed inside a Form according to the Semantic UI css declaration:

.ui.form .error.message, .ui.form .success.message, .ui.form .warning.message {
    display: none;
}

Is there any specific reason of excluding these three types of messages to be shown inside a form while allowing other message types/synonyms? I do see them being mentioned as form states in the Form docs though.

Steps

Create a Form.
Inside the Form, create three individual Message with prop warning, success and error.

Expected Result

It should display messages mentioned above.

Actual Result

It does not show any message.

Version

0.65.0

Testcase

http://codepen.io/kingdido999/pen/ggVpQY?editors=1010

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

5reactions

TimoRuettencommented, Mar 6, 2019

If someone else will have this problem: Setting the visible prop to your <Message /> Component will solve it.

3reactions

levithomasoncommented, Feb 21, 2017

The CSS is intentional so that the form state shows/hides message children of the same state:

http://react.semantic-ui.com/collections/form#success http://react.semantic-ui.com/collections/form#error http://react.semantic-ui.com/collections/form#warning

Top Results From Across the Web

javascript - Form submission success message not displaying

I am assuming of course that the alert, is the "success" message. But why call it an alert in your code? Why not...

Alerts - Bootstrap

This is a success alert—check it out! This is a danger alert—check it out! This is a warning alert—check it out! This is...

What went wrong? Troubleshooting JavaScript - MDN Web Docs

Note: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkGuess() ......

How to Report Errors in Forms: 10 Design Guidelines

Help users recover from errors by clearly identifying the problems and allowing users to access and correct erroneous fields easily.

Bootstrap 5 Warning, Info, Success and Error Alerts

Learn how to use Bootstrap alert component to create alert messages like success, warning, info and error to show important and critical information...