59 |
81 |
82 |
Summary
83 |
The above code includes a simple HTML form that identifies itself as an `ajax-form`.
84 | As you can see, there are some standard form elements included that collect the user's
85 | name, address, favorite color, and ask them if they'd like to be added to a mailing list.
86 | The name and address fields are required for submission.
87 |
88 |
89 |
Server Handling
90 |
This form will result in a POST request with a URL-encoded payload to the "test" endpoint.
91 |
92 |
93 |
Validation
94 |
If required fields are not filled out when the user clicks "submit", an "invalid" event will
95 | be triggered on the form (passing the invalid elements as event detail), and an alert will be
96 | displayed to the user. Some browsers (not Safari) will also outline the offending fields in red.
97 |
98 |
If the form is able to be submitted and passes validation checks, a "submitted" event
99 | will be triggered on the form, the form will be hidden, and a large "Sending your data..."
100 | message will appear and fade in and out continuously until the form has been submitted.
101 |
102 |
Once the server has processed and responded to the form submit, a "submitted" event
103 | will be triggered on the form and the "Sending your data..." message will disappear.
104 | If submission was successful, a message will replace the form. If a problem
105 | occurred, the form will re-appear and an alert will be displayed to the user.
106 | In each case, the underlying `XMLHttpRequest` instance will be passed to the
107 | "submitted" event handler as event detail.
108 |