required
, invalid
and valid
pseudo-classes to perform the check.
input:focus:required:invalid {
background: pink url(ico_validation.png) 379px 3px no-repeat;
}
input:required:valid {
background-color: #fff;
background-position: 379px -61px;
}
* This source code was highlighted with Source Code Highlighter .
focus
pseudo-class to cause the invalid
style for the field (Naturally, to designate all required fields as not valid will be a bad design decision from the very beginning).
valid
pseudo-class is called. Now we remove the focus
pseudo-class so that the green check mark indicating the validity of the field remains.
in-range
and out-of-range
pseudo-classes should be used in conjunction with the min
and max
attributes, be it input[type=range]
or any other field that accepts these attributes. For example, if a user enters a value outside the constraints, we can use a pseudo-class to change the style that takes this state into account. In addition, we can do the same if the value falls within the range of restrictions.
input
types are also implemented, such as email
, url
and number
. For example, email
calls the valid
pseudo-class when the user enters a valid e-mail address, the same happens for the numer
and url
fields. Checking the url
field is different in different browsers. In Opera, typing "http://"
field is denoted as valid, in Crome, "http://w"
, and in Safari, simply typing "http:"
.
placeholder
, required
, maxlength
, pattern
, min
, max
and step
.
< input id ="postcode" name ="postcode" type ="number" min ="1001" max ="8000" maxlength ="4" required />
* This source code was highlighted with Source Code Highlighter .
number
and several new attributes. In Australia, a zip code may consist of only 4 digits, so we set the maxlength
attribute to limit it. We also want to limit the maximum and minimum index values, for this we use the min
and max
attributes. The required
attribute speaks for itself (required field).
step
attribute, for bigger restriction together with min
and max
. By default, step is set to one. Therefore, any number set in the range between min
and max
is valid. If you change the value of step
to 100, then the value will be checked in the range from min
to max
in increments of 100. For example, the step
attribute will be valid for field values of 1001, 1101, 1201, 1301, and so on.
invalid
for a field with more specific restrictions, such as a phone number field, we can use the pattern
attribute, which allows regular expressions to be used to check the field value.
< input type ="tel" id ="tel" name ="tel" pattern ="\d{10}" placeholder ="Please enter a ten digit phone number" required />
* This source code was highlighted with Source Code Highlighter .
placeholder
attribute to give a hint to the user.
pattern
attribute, by adding more complex regular expressions, for example, for the password field:
< input id ="password" name ="password" type ="password" title ="Minimum 8 characters, one number, one uppercase and one lowercase letter" required pattern ="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[AZ])(?=.*[az]).*" />
* This source code was highlighted with Source Code Highlighter .
title
attribute. We do not use the placeholder
attribute in this case, since it is intended only for short messages.
title
attribute. You may notice that useful tips appear for the phone
, postcode
and password
fields, this helps when the user needs additional instructions.
< input id ="password" type ="password" />
< p class ="validation01" >
< span class ="invalid" > Minimum 8 characters, one number, one uppercase letter and one lowercase letter </ span >
< span class ="valid" > Your password meets our requirements, thank you. </ span >
</ p >
* This source code was highlighted with Source Code Highlighter .
.validation01 {
background: red;
color: #fff;
display: none;
font-size: 12px;
padding: 3px;
position: absolute;
right: -110px;
text-align: center;
top: 0;
width: 100px;
}
input:focus + .validation01 {
display: block;
}
input:focus:required:valid + .validation01 {
background: green;
}
input:focus:required:valid + .validation01 .invalid {
display: none;
}
input:focus:required:invalid + .validation01 .valid {
display: none;
}
* This source code was highlighted with Source Code Highlighter .
invalid
from the very beginning, even before the user has entered anything. That is why we used the focus
pseudo-class to show invalid
styles only when this field is in focus. This is not the optimal solution: if the user leaves this field without fulfilling the requirements of the validator, it will not be shown that the data entered is not correct until he returns to editing this field.
radio
and checkbox
input
. Technically, the fields having more conditions than just required, while empty are neither valid nor valid, but rather uncertain. This idea can correct the invalid
state and allow the optimal styles to be applied to fields depending on the validation state.
validity
attribute. The validity
attribute returns a ValidityState
object, which provides the current state of validity. The ValidityState
object contains several Boolean variables that determine which state of a particular element. Basically, their answers are true / false which enable the developer to understand what is wrong with the field:
invalid
event has another useful function. It will be called by the field as long as its value remains invalid. So, with its help, we can change the styles of the fields according to their current state.
checkValidity()
method can be performed on any single field or form as a whole, returning true or false.
input
to check the validity of the field. If everything is correct, then we update the styles and show the result immediately.
blur
event checks the validity of the field, and then applies the invalid
styles. So that the user can know about the error. This will keep displaying error styles until corrected.
validity
object that allows you to find out the current state;checkValidity()
method is checkValidity()
indicating that the form or some individual element is not valid;placeholder
, required
, min
, max
and step
;placeholder
and required
attributes for textarea
;required
for select
element;url
types for input
will be checked using the built-in regular expression.Source: https://habr.com/ru/post/105761/