Github

Forms: validation, styling & semantics

?

Name must be at least 2 words

?

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

(optional)
?

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

?

Number must be between 10 and 100

?

Should be of length 6 OR 8 characters

?

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

?

Choose something or choose not. what shall it be?

?

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

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.