HTML and CSS Reference
In-Depth Information
You can force an entire form to bypass validation using the new
novalidate
attribute
on the form itself. This is useful only if you want to use the new HTML5 form widgets but
don't want to use any of the new validation features. An alternative approach is to have a
separate button for saving progress, which uses the
formnovalidate
attribute to pre-
vent the form from being validated when it's used. In addition, you may want to change
the
formaction
property of the form to call a different URL when saving the data rather
than submitting it. You can do this in HTML5 with the
formaction
attribute.
Step 6: Bypass form validation and save form data
Let's change the order form's Save Order button to make use of these new attributes:
• Find the line in index.html that reads
<input type
=
"submit"
id
=
"saveOrder"
value
=
"Save Order"
>
Replace that line with the following:
<input type
=
"submit"
id
=
"saveOrder"
value
=
"Save Order"
formnovalidate
formaction=
"/save"
>
• Open the Order Form page in IE10 (and higher) and leave all the fields blank.
• Click the Submit Order button, and an error message will pop up on the Name field
telling you that this field must be filled out.
• Click the Save Order button, and you'll notice that the validation will no longer be
performed, and the URL the form has been submitted to will be /save rather than
/submit.
That was easy, huh? Unfortunately, it's not all that simple, because this won't work on
browsers that don't support these new attributes. Thankfully, with a little bit of JavaScript
you can fix this problem.
Step 7: Change the form action in older browsers
On older browsers, the application should also be able to change the form action. When the
user submits the form, it should call a different URL than when saving the data.
Create a new file named app.js in the same directory as the index.html file. Add the con-
tents of the next listing to this file.
