lid

jQuery validation error placement for Semantic-UI

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,

jQuery Validation wihtout error placement for Semantic UI

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,

jQuery Validation error placement for Semantic UI

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




lid