09 enhancing web forms

333 views
271 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
333
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

09 enhancing web forms

  1. 1. ENHANCING WEBFORMS WITH JQUERYForms can be usable. No, really. They can!
  2. 2. Forms allowusers tosubmit datato the webserver
  3. 3. You can pointto formelements likeweve pointedto everythingelse
  4. 4. ... but dont 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 wont work. Why?• Because forms may use name, but jQuery uses id.
  5. 5. But there are some special attributes youcan 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
  6. 6. 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 dont point to each button:$("#Fedex").change(doSomething());!•  Point to the group instead:$("input[name=shipMethod]").change(doSomething());!
  7. 7. MANIPULATING THEFORM
  8. 8. You can read and alter the data on a form $(#city).val(Bedrock);! $(#optIn).prop(checked,checked);!var x = $(#city).val();!var y = $(#optIn).prop(checked);!
  9. 9. Forms have special events that we canrespond to•  Submit•  Focus and Blur•  Click•  Change
  10. 10. You should placeyour users in a fieldto help themunderstand the form•  $(#name).focus();
  11. 11. You can disable fields that shouldnt beused right now•  $(#fieldId).prop(disabled, true);
  12. 12. In fact, whynot just hidethedisallowedfields?
  13. 13. JQUERY VALIDATION
  14. 14. Server-sidevalidations areexpensive. Dothem client-side.
  15. 15. An easy way is touse the Validationplug-in1.  Include jQuery itself2.  Download the validation plug-in3.  Add validation rules •  class="required" •  class="date" •  class="digits"4.  Add your custom error messages5.  $(#myForm).validate()
  16. 16. Advanced validationrules: {! fieldname : validationType,! fieldname : {! validationType : true,! validationType : value,! validationType : [min,max],! etc. etc.! },! etc. etc.!}!
  17. 17. You can also have advanced errormessagesmessages: {!fieldname : {! validationType : Error message,! validationType : Error message, ! etc. etc.! },! etc. etc.!}!
  18. 18. !
  19. 19. Conclusion•  We can make HTML forms easier to use through jQuery•  Use jQuerys 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

×