09 enhancing web forms

ENHANCING WEB FORMS WITH JQUERY Forms can be usable. No, really. They can!

Forms allow users to submit data to the web server

You can point to form elements like we've pointed to everything else

... but don't use name, use id <script type='text/javascript'>! $('#goButton').click(function () {! alert($('#city').val());! });!</script>!<form action='postForm.jsp' method='GET'>! <input type='text' name='city' />! <input type='button' name='goButton' />!</form>!

•  This won't work. Why?

• Because forms may use name, but jQuery uses id.

But there are some special attributes you can use to select form elements •  :checked

•  Applies to: Checkboxes and radio buttons •  Selects: All that are checked or turned on •  Example: $('input[name="networks"]:checked) – All checkboxes

with the name "networks" that the user has checked

•  :selected •  Applies to: Listboxes and dropdowns •  Selects: All that the user chose •  Example: $('#idOfListBox :selected') – All choices in the listbox that

the user has chosen

Radiobuttons are weird <input type="radio" name="shipMethod" id="Fedex" value="Fedex"/>!<input type="radio" name="shipMethod" id="UPS" value="UPS"/>!<input type="radio" name="shipMethod" id="USPS" value="USPS"/>!

• On a radiobutton, the change() event only fires when the radiobutton turns on.

• So don't point to each button: $("#Fedex").change(doSomething());!

• Point to the group instead: $("input[name=shipMethod]").change(doSomething());!

MANIPULATING THE FORM

You can read and alter the data on a form

var x = $('#city').val();!var y = $('#optIn').prop('checked');!

$('#city').val('Bedrock');!$('#optIn').prop('checked','checked');!

Forms have special events that we can respond to • Submit •  Focus and Blur • Click • Change

You should place your users in a field to help them understand the form •  $('#name').focus();

You can disable fields that shouldn't be used right now •  $('#fieldId').prop('disabled', true);

In fact, why not just hide the disallowed fields?

JQUERY VALIDATION

Server-side validations are expensive. Do them client-side.

An easy way is to use the Validation plug-in 1.  Include jQuery itself 2.  Download the validation

plug-in 3.  Add validation rules

•  class="required" •  class="date" •  class="digits"

4.  Add your custom error messages

5.  $('#myForm').validate()

Advanced validation

rules: {! fieldname : 'validationType',! fieldname : {! validationType : true,! validationType : value,! validationType : [min,max],! etc. etc.! },! etc. etc.!}!

You can also have advanced error messages messages: {!fieldname : {! validationType : 'Error message',! validationType : 'Error message', ! etc. etc.! },! etc. etc.!}!

!

Conclusion • We can make HTML forms easier to use through jQuery • Use jQuery's special form selectors (:checked, etc.) • Get and set values with val() and prop('checked') • Place the user in the right field with focus() • Hide unneeded options with hide() • Show them again when ready with show() • Validate on the client with the jQuery Validation plug-in