CSS

CSS

Text Input Validation & Error without JavaScript

Use HTML5 properties and advanced CSS attributes for validation

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·Jul 11, 2022·

2 min read

Text Input Validation & Error without JavaScript

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 &quot;&apos;]*" 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 &quot;&apos;]*" 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 - anjanesh.s3.amazonaws.com/demo/input-valida..
Bootstrap - anjanesh.s3.amazonaws.com/demo/input-valida..

 
Share this