Integrating with MagicSuggest

This example demonstrates how to integrate FormValidation with MagicSuggest.

It's a jQuery plugin that shows a multiple selection dropdown which options can be passed from a given data source.

The MagicSuggest plugin attaches a given element, not an input. That's why we need to prepare a hidden field to track which options are chosen:

We can apply a few of validators for the hidden field. Let's say that it can't be empty:

Now, all the preparations are done. It's the time for us to integrate MagicSuggest with the destination element above:

To make the demonstration simple, the data source is just a list of string. In reality, it can be an URL that fetches data from your back-end.

Currently there is no connection between the hidden field and our destination dropdown. What we wish are

  • Update the value for hidden field after choosing an option
  • Then revalidate the hidden field

It can be done by triggering the MagicSuggest's selectionchange event and the FormValidation's revalidateField() method. The following piece of code illustrates that approach:


You should look at the basic principle when integrating FormValidation with 3rd party libraries


The demonstration also uses the technique introduced in the Adjusting icon position example, so the feedback icon is displayed at the desired position.

More examples

Related validators

The following validators might be useful to you.