09 enhancing web forms
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

09 enhancing web forms

  • 402 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
402
On Slideshare
402
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ENHANCING WEBFORMS WITH JQUERYForms can be usable. No, really. They can!
  • 2. Forms allowusers tosubmit datato the webserver
  • 3. You can pointto formelements likeweve pointedto everythingelse
  • 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. 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. 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. MANIPULATING THEFORM
  • 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. Forms have special events that we canrespond to•  Submit•  Focus and Blur•  Click•  Change
  • 10. You should placeyour users in a fieldto help themunderstand the form•  $(#name).focus();
  • 11. You can disable fields that shouldnt beused right now•  $(#fieldId).prop(disabled, true);
  • 12. In fact, whynot just hidethedisallowedfields?
  • 13. JQUERY VALIDATION
  • 14. Server-sidevalidations areexpensive. Dothem client-side.
  • 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. Advanced validationrules: {! fieldname : validationType,! fieldname : {! validationType : true,! validationType : value,! validationType : [min,max],! etc. etc.! },! etc. etc.!}!
  • 17. You can also have advanced errormessagesmessages: {!fieldname : {! validationType : Error message,! validationType : Error message, ! etc. etc.! },! etc. etc.!}!
  • 18. !
  • 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