A better jQuery scale slider

I was looking to make the jQuery slider I had posted about earlier a little better. After a little bit of work and ‘leveraging‘ some code from this extension to the jQuery slider, I came up with the following.

Click here for the demo.

Advertisement

Form validation and processing with jQuery

Developing web mapping applications is uniquely different from most other web sites in the sense that the entire web application is just a single web page. The user never really leaves the map page and all the form validations and submissions happen through ajax. The map page will contain multiple forms that on submission do not post back their contents back to the server but just perform certain actions on the map. These actions could happen after performing an ajax request to the ArcGIS Server REST API or an ajax submission of the form contents.

jQuery and some of its plug-ins prove to be quite useful for performing some of these repetitive form validation and processing tasks. The two jQuery plug-ins that I use as a part of my toolkit are

jQuery Validation Plug-in

jQuery Form Plug-in

With help of jQuery, the above mentioned plug-ins and some CSS, I had built a small helper JavaScript class that helps me tackle the form scenarios on a map page rather effortlessly. There is plenty of documentation for jQuery and its validation and form plug-ins all around the Internet. But this FormHelper.js class just encapsulates some more of the repetitive tasks around them. The class takes in the following five possible parameters.

1) formID  (REQUIRED) – The ID of the HTML form element on the page

2) rules (REQUIRED) – NULL if no rules needs to be specified else pass the rules in the format accepted by the jQuery validation plug-in. More details on the format of the rules can be found here.

3) submitHandler (REQUIRED) – A callback function that will be called when the user clicks submit and the input values PASS the validations specified.

4) validationFailedHandler (OPTIONAL) –  A callback function that will be called when the user clicks submit and the input values FAIL validations specified.

5) ajaxFormOptions (OPTIONAL) – form options in the format accepted by the jQuery form plug-in. More details on the options for the jQuery form plug-in can be found here.

Here is the FormHelper in action. Obviously, the interface in the demo may not satisfy or work for all your requirements but it will get you started or might give you something to tweak around and achieve your desired interface.