Repetition Model Example

Please enable Javascript and refresh this page.

Example 17: Form validation

Here we test all of the form validation controls.

This test is obsolete because the form validation procedures have been adopted into HTML5, and removed from the Javascript library: you are therefore only testing your browser's built-in form validation functions. The validation indicator appears to be broken, and might need to be reconfigured to work with the built-in HTML5 form validation events.

invalid Event model options

Use DOM Level 2 event model Unsupported by this browser

Use traditional event model

Calendar controls

type=datetime
type=datetime-local
type=date (no step)
type=month step=2
type=week step=2
type=time step=any

Text input

type=text (required)
type=text (pattern="\d\d\d-\d\d-\d\d\d\d")
type=text (required pattern="\(\d\d\d\) \d\d\d-\d\d\d\d")
type=email (required, overriding oninvalid)
type=text (required)
type=text (pattern="")
type=url (required pattern)
1 2 3 (length should be 7) maxlength=10 (QUESTION: what about when maxlength < len(defaultValue))
type=range default step = 1
type=number min=-127, max=128, step=0.5

Non-input required

Favorite color: red green blue

Favorite food: baba ganouj massaman curry pho

Movies:

Event Log

Form is valid!

#	Type	Element	Model

(Click the "check validity" button above to fire events)

↑ Menu

Previous edition ↓

Next →

← Previous