“This is the 8th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Knowledge points

The: VALID attribute matches elements whose input values are valid. The :invalid attribute matches elements whose input values are invalid. The Required attribute specifies that input fields must be filled in before submission

The: VALID /:invalid selector is used to set the specified style if the value in a form element is valid/ invalid.

Note: The: VALID /:invalid selectors only apply to elements that can specify interval values, such as min and Max attributes in the input element, the correct email fields, valid number fields, and so on.

The required attribute applies to the following types: Text, search, URL, telephone, email, password, date Pickers, number, checkbox, radio, and file. Textarea also works.

:valid, :invalid example

<style>
input{
  display: block;
  padding: 0 20px;
  outline: none;
  border: 1px solid #ccc;
  width: 150px;
  height: 40px;
  transition: all 300ms; } / /inputThe content is legal and the border color is greeninput:valid {
  border-color: green;
  box-shadow: inset 5px 0 0green; } / /inputContent is illegal, border color is redinput:invalid {
  border-color: red;
  box-shadow: inset 5px 0 0 red;
}
</style>
<input type="text" placeholder="Please enter your cell phone." pattern="^1[3456789]\d{9}$" required>
Copy the code

Preview address:

The required sample

.<form>
  <input type="text"
      placeholder="Please enter your cell phone."
      pattern="^1[3456789]\d{9}$"
      required
  >
  <button type="submit">submit</button>
</form>
Copy the code

Click Submit, and the validation will be automatically done, and HTML5 will add Tips directly to the user, as shown in the following example (although the style is not very beautiful) :

Online demo address

[codepen_embed height=”350″ theme_id=”1″ slug_hash=”VwZzZje” data-default-tab=’result’ user=”javanf”]See the Pen DcHup by Elton Mesquita (@eltonmesquita) on CodePen.[/codepen_embed]