Decorating Input fields with validation error messages

[john napiorkowski]

One of the things I I can't find a very neat way of doing is when updating input fields with the results of AJAX data and part of the returned data is error / validation information.  Either I need to run code to wrap / add some extra elements to the input fields with errors to display the errors nicely, or I need to have all those fields part of the original HTML and then set CSS to hide the display.  For example when using Semantic UI I might have a UI of a input field that looks like this when there is no error:

<div class="field"> <label>E-mail</label> <input type="email" placeholder="j...@schmoe.com"> </div>

But then needs to change to this when displaying errors

<div class="ui form error"> <div class="field"> <label>E-mail</label> <input type="email" placeholder="j...@schmoe.com"> </div> <div class="ui error message"> <div class="header">Action Forbidden</div> <p>You can only sign up for an account once with a given e-mail address.</p> </div> <div class="ui submit button">Submit</div> </div>

(just an example, and of course you often have a ton of fields)

I was just wondering what other people might be doing and if there was any best practices for writing neat code around this particular problem.  The issue I have with adding in all the extra elements via pure.js is that its all that stuff is like strings in the code ref and my template authors hate that!

John

[Mic (BeeBole)]

Hi John,

There are different ways to do that.

• You always generate the HTML for the decoration.
  And with CSS you show it, when the classes error are set.
  Either dynamically or re-running the rendering
  
  
• Or you do that dynamically in the DOM(not re-render) on the existing rendered template.
  

Although it creates nodes in the DOM for nothing, I prefer the first option.

And if for instance you have something like:

.error.message { display: none }
.error .error.message{ display: block }

The browser will ignore the nodes when rendering if there is no errors, without any performance issue.