An Interest In:
Web News this Week
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
- February 23, 2024
Role of CSS in form validation
:valid
selector - selects elements with a value that validates as per the element settings
:invalid
selector - selects elements with a value that won't validates as per the element settings
Both works on form input elements like
- Input elements with min & max are applied
- Email type input with legal email
- Number fields with numeric value etc.
<style> * { box-sizing: border-box; } .html-validation { margin: auto; width: 30%; border: 1px solid green; box-shadow: 5px 5px 8px green; border-radius: 5px; padding: 20px; } label { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: block; text-align: center; } input { width: 100%; padding: 10px; margin: 10px 0px; border-radius: 10px; } input:invalid { border: 1px solid red; } input:valid { border: 1px solid green; }</style><form class="html-validation" action="#0" method="post"> <label for="firstName">First Name</label> <input name="firstName" type="text" required> <input type="submit"></form>
Styles are applied as soon as the input becomes valid or invalid.
There are few other CSS selectors which does similar kind of work are:
:optional
- Selects all non-required elements in form and if we apply styles using this selector then applied to all optional elements in the form.
:required
- Opposite to optional and selects all required elements in the form.
:in-range
- selects elements with value specified is within the range - mostly applicable for input elements with max and min specified.
:out-of-range
- Opposite to in-range.
:readonly
- selects elements which are specified with readonly attribute
:read-write
- selects elements which are readable and writable. As such not mentioned as disabled and readonly.
:checked
- Selects all checked elements. Checkboxes and radio buttons, options.
:hover
- selects any element when user hovers over it
:visited
- applicable for links when user clicked and visited it.
:active
- selects when user selected it.
:disabled
- selects all elements with attribute mentioned as disabled
:focus
- Selects focused element
:empty
- selects elements with no children
Original Link: https://dev.to/urstrulyvishwak/part-of-css-in-form-validation-535g
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To