09 enhancing web forms
DESCRIPTION
TRANSCRIPT
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