Semantic UI (Semantic User Interface) is one of the best
modern front-end CSS & JS framework, powered by LESS and JQuery. This is also like as Bootstrap framework. This is a light weight framework. Using this framework we can able to design unique wonderful themes or web applications. This has lot of in-build components such as
Elements, Collections, Views, Modules, behaviors.
Semantic UI also has the own form validation. Here, I will explain how to validate a
semantic UI form using
JQuery validation plugin. By default,
jQuery Validation plug-in append error messages to corresponding input elements in the form. So validation error message will look like,
But we would like to use
Semantic UI "prompt" to provide better UX & we were expected to show the error message in the below format,
We wanted a global Validator rule since we had many forms within our application we were working on and we didn't want to include a solution to each form’s instantiation. jQuery Validation have very neat API methods to handle this kind of scenario. We used errorPlacement, highlight & unhighlight API methods as below script to take care of this.