Bug in Form-Validation Error Messages

[sangeethnandakumar]

This bug is sometimes visible and sometimes not and I don't know why

• The bullets under the [error-message-ui] is not rendering when I put my website online
• Works fine with localhost
• Sometimes it works like, after 2, 3 times Chrome refreshes, it appears

[akotulu]

I'm experiencing the same issue. It is caused by From errors function. It sets the form class to error and then adds the error messages to the div:

File: /public/libs/semantic/dist/components/form.js
741:           errors: function(errors) {
742:             module.debug('Adding form error messages', errors);
743:             module.set.error();
744:             $message
745:               .html( settings.templates.error(errors) )
746:             ;
747:           }

There are rules in form.css

File: /public/libs/semantic/dist/components/form.css
241: /*--------------------
242:    Types of Messages
243: ---------------------*/
244: 
245: .ui.form .success.message,
246: .ui.form .warning.message,
247: .ui.form .error.message {
248:   display: none;
249: }

and for error

File: /public/libs/semantic/dist/components/form.css
429: /* On Form */
430: .ui.form.error .error.message:not(:empty) {
431:   display: block;
432: }

This wont work. When class is added, the div list is empty and error messages will not be rendered cause css add error class was called first. Fix is simple switch of add messages and set error class functions. Generated patch file:

--- public/libs/semantic/dist/semantic.js   2019-09-27 00:47:06.000000000 +0300
+++ public/libs/semantic/dist/semantic.js   2019-09-27 00:34:49.000000000 +0300
@@ -1238,10 +1238,10 @@
           },
           errors: function(errors) {
             module.debug('Adding form error messages', errors);
-            module.set.error();
             $message
               .html( settings.templates.error(errors) )
             ;
+            module.set.error();
           }
         },

"semantic": "semantic-ui#2.4.1"

[lubber-de]

This is/was an unclear browser implementation/bug, because from the CSS specification it does not matter if the class is added before changing the html content or afterwards. This bug is especially noticable in Safari.

Long story short: The :empty selector is missing (although is does not seem necessary at first)

The community fork Fomantic UI fixed this by https://github.com/fomantic/Fomantic-UI/pull/558