Search for a command to run...
Use HTML5 properties and advanced CSS attributes for validation
No comments yet. Be the first to comment.
Check if a CSS feature is ready in a browser or not and apply code for both scenarios
The :has selector can be used to make a 100% iframe's container to be also 100%
Catch the first element type that's a child of a parent element
Demo : http://s3.css.co.in/demo/mega-menu.html Code : https://gist.github.com/anjanesh/876b781b69fff9598fd73ffeda4b9318 Sorry for no explanation here. #top-menu-1 > div > a + div:hover has to be displayed as block too. For people who know CSS, I thin...
CSS
13 posts
Styles of the Web
Vanilla CSS:
input.nameValidation + label::after
{
content: "Only alphabets and quotes allowed";
color: orange;
}
input.nameValidation:focus:required:invalid:not(:placeholder-shown)
{
border: 1px solid red;
animation: shake 300ms;
}
/* animation inspired by https://www.instagram.com/tv/CfvWUG3jgY */
@keyframes shake
{
25% { transform: translateX(4px); }
50% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
input.nameValidation:invalid:not(:placeholder-shown) + label
{
display: inline-block;
}
input.nameValidation:invalid:not(:placeholder-shown) + label::after
{
content: "Invalid Entry for a Full Name";
color: red;
}
HTML :
<form>
<div>
<input type="text" class="nameValidation" required pattern="[a-zA-Z "']*" placeholder="Enter your Full Name" />
<label></label>
</div>
<button type="submit">Submit</button>
</form>
There's a pseudo CSS property called :placeholder-shown which can be used in CSS to fill in styles if the placeholder still there in the text input. If the placeholder still exists then it means that the value is empty.
not(:placeholder-shown) states that the placeholder is not shown in the text input and a result means that it's not empty. The user has entered atleast one character in the text input.
input:invalid gets invoked when the input text is invalid when on the pattern attribute fails to return the input validation as true.
So put together, input.nameValidation:invalid:not(:placeholder-shown) + label::after will show the label content with the style which is just after input text field when the input pattern triggers the user input as a invalid .
Using Bootstrap 5 for some nice looking default styles :
.form-control:focus
{
box-shadow: none;
}
input.nameValidation:focus
{
outline:none;
}
input.nameValidation + label::after
{
content: "Only alphabets and quotes allowed";
color: orange;
}
input.nameValidation:focus:required:invalid:not(:placeholder-shown)
{
border: 1px solid red;
animation: shake 300ms;
}
/* animation inspired by https://www.instagram.com/tv/CfvWUG3jgY */
@keyframes shake
{
25% { transform: translateX(4px); }
50% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
}
input.nameValidation:invalid:not(:placeholder-shown) + label
{
display: inline-block;
color: red;
}
input.nameValidation:invalid:not(:placeholder-shown) + label::after
{
content: "Invalid Entry for a Full Name";
color: red;
}
HTML :
<form>
<div>
<input type="text" class="form-control nameValidation" required pattern="[a-zA-Z "']*" placeholder="Enter your Full Name" />
<label class="mt-1"></label>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
Demos :
Vanilla CSS - https://anjanesh.s3.amazonaws.com/demo/input-validation.html
Bootstrap - https://anjanesh.s3.amazonaws.com/demo/input-validation-bs5.html