In one of our current project, we are using Semantic UI as CSS framework. Semantic UI come along with its own form validation . But we use validate This ( Awesome server & client side validation framework by Bob Silverberg ) which is internally using jQuery Validation plug-in for client side validation.
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.
Please check out the working demo version here