:[a-z A-Z\u00a1-\uffff0-9]-*)*[a-z A-Z\u00a1-\uffff0-9] )*)(?
In the next article in this series, I'll show you how to use the native Constraint Validation API to bolt-in our desired UX with some lightweight Java Script.
Most Java Script form validation libraries are large, and often require other libraries like j Query.
For example, Mail Chimp's embeddable form includes a 140kb validation file (minified).
Add the attribute let's you run regex validations against input values.
Bonus CSS tip: style invalid selectors only when they aren't currently being edited with . :[a-z A-Z\u00a1-\uffff0-9]-*)*[a-z A-Z\u00a1-\uffff0-9] )(? You can style fields that have errors on them with the pseudo-selector, but you can't style the error messages themselves. Chrome doesn't display any errors until you try to submit the form.