So, I’m currently working on a plug-in to validate forms easily without using a JavaScript framework. I want the way errors are displayed to be very expandable, and realized the biggest issue was the “structure” of the error message was too unique for any designer to go outside of what I’ve already created. The best solution was to make the “structure” an option by allowing CSS Selectors.
I’m releasing this function a bit ahead of time since it’s been a while since I’ve last updated this blog.
Notice it’s use of child and sibling selectors.
Example Input:
div#formValidation >
div.message:contains('This field is required') +
div.exit +
div.arrowDown[rel=1]
Example Output:
<div id="formValidation"> <div class="message">This field is required</div> <div class="exit"></div> <div class="arrowDown" rel="1"></div> </div>
