Skip to content

Commit

Permalink
replaced a couple of screenshots in jQuery chapter
Browse files Browse the repository at this point in the history
  • Loading branch information
yfain committed Nov 25, 2013
1 parent aeb526e commit 606b130
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 2 deletions.
6 changes: 5 additions & 1 deletion ch3_mockup.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -634,10 +634,14 @@ The HTML of the donation form shown on <<FIG3-11>> is shown below. When the user
</div>
----

The JavaScript code supporting the UI transformations related to the button Donate is shown below. It's the code snippet from the main.js from project-04-donation. The click on the Donate button invokes the event handler `showDonationForm()`, which simply hides the `<div id="donation-address">` with Lorem Ipsum and displays the donation form: ` <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">">`. After clicking on the submit button the data from the form `_xclick` will be validated and sent to paypal.com. If the user clicks on "I'll donate later", the code hides the form and shows the Lorem Ipsum from the `<div id="donation-address">` again.
The JavaScript code supporting the UI transformations related to the button Donate is shown below. It's the code snippet from the main.js from project-04-donation. The click on the Donate button invokes the event handler `showDonationForm()`, which simply hides the `<div id="donation-address">` with Lorem Ipsum and displays the donation form: ` <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">">`. When the form field loses focus or after the user clicked on the Submit button, the data from the form `_xclick` must be validated and sent to paypal.com. If the user clicks on "I'll donate later", the code hides the form and shows the Lorem Ipsum from the `<div id="donation-address">` again.

IMPORTANT: Not including proper form validation is a sign of a rookie developer. This can easily irritate users. Instead of showing error messages like "Please include only numbers in the phone number field" use http://shop.oreilly.com/product/0636920012337.do[regular expressions] to programmatically strip non-digits away.

Two `select` dropdowns in the code above contain hard-coded values of all states and countries. For brevity, we've listed just a couple of entries in each. In Chapter 2 we'll populate these dropdowns using the external data in JSON format.

TIP: Don't show all the countries in the dropdown unless your application is global. If the majority of the users of your country live in France, display on top of the list France and not Afghanistan (the first country in alphabetical order).

===== Assigning Function Handlers. Take 1.

The next code fragment is an extract of JavaScript file main.js provide by Jerry. This code contains function handlers that process user clicks in the Donate section.
Expand Down
2 changes: 1 addition & 1 deletion ch5_jquery.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -956,7 +956,7 @@ var validator = $('form[name="_xclick"]').validate({

<4> Set the custom error messages to be displayed if the user enters invalid data.

<<FIG5-7>> shows the above code in action. After entering a one-character name and missing an email the user will see the corresponding error messages. These messages won't be shown until the user submits the form. But as soon as the user will fix any of them (e.g. enter one more letter in the name) the form will be immediately re-validated and the error messages will be removed as soon as the user fix the error.
<<FIG5-7>> shows the above code in action. After entering a one-character name and not proper email the user will see the corresponding error messages. Each message will be shown when the user leaves the corresponding field. But as soon as the user will fix any of them (e.g. enter one more letter in the name) the form will be immediately re-validated and the error messages will be removed as soon as the user fix the error.

[[FIG5-7]]
.Validator's Error Messages
Expand Down
Binary file modified images/fig_05_07.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/fig_05_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 606b130

Please sign in to comment.