Total Form Validation

Github
Vertical orientation Disable alerts

# Forms: validation, styling & semantics

Name
?

Name must be at least 2 words

Occupation
?

An optional field. This field is only validated when it has a value.
Minimum 5 chars for this example.

(optional)
HTML5 Regex
?

This field uses HTML5 "pattern" attribute to be validated.
"\d+" - only digits are allowed

email
Confirm email address
Number
?

Number must be between 10 and 100

Date
Password
?

Should be of length 6 OR 8 characters

Repeat password
Telephone
?

Notice that for a phone number user can input a '+' sign, a dash '-' or a space ' '

Drop down selection
?

Choose something or choose not. what shall it be?

url
Checkboxes I agree
Multifield
?

This is a multifield, which let the user input a serial number or credit card number for example, and the trick is to validate the combined result, which is stored in a hidden field

File upload
message

There is a hidden "Required" form field below, notice it will not be validated due to its lack of visibility. The reason for this is that sometimes there is a section in a form that is not visible until some action is taken, but you do not want to change all those fields' "required" attributes on-the-fly, so that is why.