JQuery UI and Validation


I’m still on my journey to become more proficient in JQuery, and the best way to get better is to do more hands-on. This time, I worked on an example for a simple registration form, with some animations, and made use of JQuery UI library and JQuery Validation library.

The sample registration requires you to first fill in “Step 1” of the registration process before you can go to “Step 2”. Each step is lazily validated until you click the “Next” button, and the fields will be eagerly validated after that. Below are screenshots of validation provided by JQuery Validation library.

JQueryRegister_ValErrorJQueryRegister_ValValid

JQuery Validation
Using the JQuery Validation library, you mark an input’s validation mechanism using Css classes or attributes. For example, to mark an input as required, accept only digits, and must have minimum value of 1, you do it like so.

// adding required to css class
<form id="registerForm" method="post">
    <input id="someInput" type="text" class="required digits" maxlength="3" min="1"  />
</form>

// JQuery to validate all elements in entire form
$('#registerForm').validate();

// JQuery function to validate single element
$('#someInput').valid();

You can also set styles to validation error messages. By default, the validation library recognizes “label.error” and “input.error” styles, and you can modify/create these styles to define how you want your error messages and input element to look like. However, there’s no default style for valid inputs, but you can customize one for yourself. First you use this JQuery statement to define that a successfully element bind to a Css class named “valid“.

<script type="text/javascript">
	jQuery.validator.setDefaults({ success: "valid" });
</script>

Then, create the “label.valid” Css style, which has a background image of your choice.

label.valid {
	background-image: url('success.png');
	float: left;
	display: block;
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	vertical-align: top;
	margin-left: 5px;
}

Check out the JQuery Validation documentation to learn more, there’s heaps more that you can do.

JQuery UI
JQuery UI is a plugin that provides a lot of useful UI features that one would need. I really like the DatePicker and Dialog feature from this library and it’s so easy to hook them up. 🙂

JQueryRegister_DatePickerJQueryRegister_Dialog

// input for datepicker
<input id="regDate" type="text" class="required date" />

// div for dialog box
<div id="confirmation" title="Confirm Registration">

Are you sure you want to register?</div>
// JQuery for hooking up datepicker and dialogbox
$('#regDate').datepicker({ showButtonPanel: true });

$('#confirmation').dialog({ bgiframe:true, modal:true, autoOpen:false,
			buttons: { Ok: function() { $(this).dialog('close');

Here’s documentation for Datepicker and Dialog.

Note: When you download the JQuery UI library, you can pre-select what functionalities you need, so you keep the js file lean. Also remember to select the Theme you want, and reference the files and the Css class in the package in order for the Theme to show up on your form.

There’s a lot more to these libraries than what I’ve demonstrated. What makes JQuery truly powerful is the power to extend the Core with plugins and it opens up a window of limitless fun and possibilities for client side scripting.

Also check out Microsoft’s support for JQuery, Glimmer.

Download the sample code here.

Share this post:
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: