09 enhancing web forms
DESCRIPTION
TRANSCRIPT
![Page 1: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/1.jpg)
ENHANCING WEB FORMS WITH JQUERY Forms can be usable. No, really. They can!
![Page 2: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/2.jpg)
Forms allow users to submit data to the web server
![Page 3: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/3.jpg)
You can point to form elements like we've pointed to everything else
![Page 4: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/4.jpg)
... 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.
![Page 5: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/5.jpg)
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
![Page 6: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/6.jpg)
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());!
![Page 7: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/7.jpg)
MANIPULATING THE FORM
![Page 8: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/8.jpg)
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');!
![Page 9: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/9.jpg)
Forms have special events that we can respond to • Submit • Focus and Blur • Click • Change
![Page 10: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/10.jpg)
You should place your users in a field to help them understand the form • $('#name').focus();
![Page 11: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/11.jpg)
You can disable fields that shouldn't be used right now • $('#fieldId').prop('disabled', true);
![Page 12: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/12.jpg)
In fact, why not just hide the disallowed fields?
![Page 13: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/13.jpg)
JQUERY VALIDATION
![Page 14: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/14.jpg)
Server-side validations are expensive. Do them client-side.
![Page 15: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/15.jpg)
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()
![Page 16: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/16.jpg)
Advanced validation
rules: {! fieldname : 'validationType',! fieldname : {! validationType : true,! validationType : value,! validationType : [min,max],! etc. etc.! },! etc. etc.!}!
![Page 17: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/17.jpg)
You can also have advanced error messages messages: {!fieldname : {! validationType : 'Error message',! validationType : 'Error message', ! etc. etc.! },! etc. etc.!}!
![Page 18: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/18.jpg)
!
![Page 19: 09 enhancing web forms](https://reader034.vdocument.in/reader034/viewer/2022052315/5492a219b479596f4d8b4658/html5/thumbnails/19.jpg)
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