08 enhancing web forms.pptx
TRANSCRIPT
ENHANCING WEB FORMS WITH JQUERY Forms can be usable.
Forms are the main way to interact with the server
2. Server responds
with page 1
1. Browser requests page 1
3. Surfer fills out the form
fields and hits submit
4. Form data is sent in the
request header
5. Server processes
all that data
6. Server responds
with "success"
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 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
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
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);
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.}
tl;dr • 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