jQuery Select2 Validation

Since my recent post for jQuery TE Validation seems to be popular ( at least for my site 🙂 ) I thought I would demonstrate how to validate another plugin that doesn’t work right out the gate. I’m referring to the Select2 plugin. It is a jQuery replacement for SELECT boxes with a BootStrap type of look. It can product a listbox similar to Facebook’s popular multi-select style. Other options include list item images, searching, sorting (with drag & drop), infinite scrolling, and much more. We will be validating it with the jQuery Validation plugin.

This example uses the following external sources. All of them can be referenced through a Content Delivery Network:
Alternatively, you can go to the plugin sites and retrieve the individual files, or simply install nugets if using .NET.

Now let’s add some markup to the page. The code below covers Select2s that are made in a traditional sense with SELECT tags. If you are creating Select2s with dynamic options (which uses an INPUT[HIDDEN] instead) then I have solution as well. See the second DEMO at the bottom of this tutorial. Here, I’m creating a form with three different types of elements to validate. Each of them have the "required" class which is auto-detected by the jQuery validation plugin. Of course you’re mainly concerned with Select2 but the additional fields are good for a visual comparison when validation fails.
Now let’s add some CSS. Most of this is basic styling besides the myErrorClass portions, which are used to handle validation errors. In our jQuery Validation script we will set it to be our error class. If something fails it will put that class on both the element and an error label. In our script we manipulate the error label to appear behind our element. The !important keyword is needed to override default select2 styling. If all goes well then users should see a striped background on invalid elements as well as a red message describing the error in more detail beneath it.
And finally we add the script. I’ve placed comments throughout to explain the various components:
That’s it! With these adjustments Select2 will have the same look and feel as the rest of your form elements when validating. Leave me a one-liner if you found this useful.

See a DEMO. View this DEMO if loading options dynamically. If this post has helped you then upvote my answer on StackOverflow.

Thanks.

Read More

jQuery TE Validation

In one of my latest projects I utilized the jQuery Validation Plugin to handle the error validation of a page. It is a popular plugin that examines all elements in a form and validates them based on rules and/or classes. For instance, you can set a class on an textbox to be "email" and it will notify the user (as they leave the element) if the data they entered has correct email syntax.

One of the fields in my page was a rich text editor (WYSIWYG) using the jQuery TE Plugin. Unfortunately, validation would not work with it because of the way it manipulates the textarea. The plugin forces users to interact with an Input DIV (a DIV that uses the contenteditable attribute), while the textarea is hidden and populated behind the scenes.

Sample HTML:
I begin by transforming the textarea into a WYSIWYG by calling the "jqte" method. I then override the default behavior of the validator plugin by including invisible elements in validation. Normally it would ignore the textarea since it can't be seen.
I then initialized my validation object so it will monitor the form. The plugin enumerates through the targeted form’s elements and detects the "required" class on my textarea. Below we also specify a custom error class (maskError) to be used for our error label. We then manage the placement of the error label. By default the validation plugin will stick the message after an element. With jQuery TE, the textarea is placed in a hidden DIV, so the error label cannot be seen if it is placed there. Since a Parent DIV surrounds the whole widget, it is better positioned after it. Next, we override the highlight and unhighlight functions so that the errorClass will also be added/removed from the widget's Parent DIV.
Next, our CSS will come into play. If our errorClass is set it will put a red border and striped background on the widget. This simply accommodates the error message.
Next, we intercept the "blur" event of the Input DIV. Here I am checking to see if the form has been submitted or not. If so then I revalidate the form each time a user leaves the WYSIWYG, which in turn, sets or removes the visual error indicators.
Lastly, we wire-up the click event of the button to submit the form. We are displaying an alert to show everything is valid. You can actually bypass that and just submit the form and it will invoke the Validator plugin.
This seemed to do the trick for me and made the WYSIWYG behave like the other form elements on the page.

See a DEMO.

Enjoy.

Read More