Javascript page change demo

Javascript can change parts of the page in response to user actions, without reloading the entire page.

Here, when focus leaves quantity, total is re-calculated. This is entirely client-side. The server is not involved. Try entering text that is not a number.

View Source to see JS and HTML.

Quantity:	x Price: €4.22
Your name:
Total:	€0.00

---

JavaScript validate as you type

• Could go further and validate with each character change.
• JavaScript validate 'as you type' - onkeypress, onkeyup, onblur

---

HTML5 input patterns

HTML5 introduces forms that in HTML and CSS alone can do input checking. No JS needed.

• <input element
• <input pattern attribute
• Useful patterns

• CSS invalid selector. The input will have this set if the pattern does not match, even before pressing submit. So you can change style to indicate error, even before pressing submit.

e.g. This HTML form allows only integer numbers. Try it out. View source to see CSS and HTML.