Vishful thinking…

Form validation and processing with jQuery

Posted in Uncategorized by viswaug on November 10, 2008

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.



2 Responses

Subscribe to comments with RSS.

  1. Dave said, on November 11, 2008 at 4:10 pm

    i like your plugin. thanks for your work.
    however, i am having trouble with the 5th parameter – “options”.
    this worked fine with just the form plugin, but it seems to just ignore this with the validation plugin.
    your example only uses the 1st 4 parameters.
    so, i’m stuck.
    any chance of a demo using all 5 and an ajax xml response?

    i know. it’s a big request.

    thanks anyway.

  2. viswaug said, on November 11, 2008 at 4:37 pm

    Hi Dave,

    Can you provide me with a little more details on the problem you are having? To use the FormHelper, both the validation and the form plug-in must be included in the apge.

    Thank You,

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: