Below are the steps to handle incorrect input after receiving only one letter:

H-I

This is my input

.centered-name 
{
  width: 80%;
  margin: auto;
}
.group {
  width: 100%;
  overflow: hidden;
  position: relative;
} 
.label {
  position: absolute;
  top: 40px;
  color: #666666;
  font: 400 26px Roboto;
  cursor: text;
  transition: 0.3s ease;
  width: 100%;
  text-align: center;
}

.input {
  display: block;
  width: 100%;
  padding-top: 36px;
  border: none;
  border-radius: 0;
  font-size: 30px;
  transition: .3s ease;
  text-align: center;
}
.input:valid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}


.input:focus {
  outline: none;
}
.input:focus ~ .label {
  top: 3px;
  font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
  transform: translateX(0);
}
.bar {
  border-bottom: 2px solid #ff5126;
  width: 100%;
  margin-top: 6px;
  transition: .3s ease;
}
.input:valid ~ .bar
{
  border-bottom: 2px solid #3bb873;
}
<div class="centered-name">
    <div class="group">
        <input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
        <label class="label res" for="name">Name</label>
        <div class="bar"></div>
    </div>
</div>

When the input is invalid (less than 5 characters) and you focus out, the label moves down

I also tried 

.input:invalid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}


.centered-name
{
  width: 80%;
  margin: auto;
}
.group {
  width: 100%;
  overflow: hidden;
  position: relative;
} 
.label {
  position: absolute;
  top: 40px;
  color: #666666;
  font: 400 26px Roboto;
  cursor: text;
  transition: 0.3s ease;
  width: 100%;
  text-align: center;
}

.input {
  display: block;
  width: 100%;
  padding-top: 36px;
  border: none;
  border-radius: 0;
  font-size: 30px;
  transition: .3s ease;
  text-align: center;
}
.input:valid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}
.input:invalid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}

.input:focus {
  outline: none;
}
.input:focus ~ .label {
  top: 3px;
  font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
  transform: translateX(0);
}
.bar {
  border-bottom: 2px solid #ff5126;
  width: 100%;
  margin-top: 6px;
  transition: .3s ease;
}
.input:valid ~ .bar
{
  border-bottom: 2px solid #3bb873;
}
<div class="centered-name">
    <div class="group">
        <input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
        <label class="label res" for="name">Name</label>
        <div class="bar"></div>
    </div>
</div>

However, the label rises before any input is entered

How can we make the input invalid after typing a single letter?

javascripthtmlcss

Answer №1

Here is a suggested solution:

$('#name').keyup( function() {
   if( this.value.length < 6 ) {
   $('input').blur();
   }
});
.centered-name 
{
  width: 80%;
  margin: auto;
}
.group {
  width: 100%;
  overflow: hidden;
  position: relative;
} 
.label {
  position: absolute;
  top: 40px;
  color: #666666;
  font: 400 26px Roboto;
  cursor: text;
  transition: 0.3s ease;
  width: 100%;
  text-align: center;
}

.input {
  display: block;
  width: 100%;
  padding-top: 36px;
  border: none;
  border-radius: 0;
  font-size: 30px;
  transition: .3s ease;
  text-align: center;
}
.input:valid ~ .label 
{
  top: 3px;
  font: 400 26px Roboto;
}


.input:focus {
  outline: none;
}
.input:focus ~ .label {
  top: 3px;
  font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
  transform: translateX(0);
}
.bar {
  border-bottom: 2px solid #ff5126;
  width: 100%;
  margin-top: 6px;
  transition: .3s ease;
}
.input:valid ~ .bar
{
  border-bottom: 2px solid #3bb873;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-name">
    <div class="group">
        <input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
        <label class="label res" for="name">Name</label>
        <div class="bar"></div>
    </div>

</div>

Answer №2

It seems like the issue you are facing is due to misuse of valid styling techniques.

To resolve this, consider utilizing :placeholder-shown instead. You can learn more about it here: https://caniuse.com/#feat=css-placeholder-shown

Here's an adjustment you can make in your initial example:

.input:not(:placeholder-shown) ~ .label {
   top: 3px;
  font: 400 26px Roboto;
}

Additionally, incorporate a placeholder into your input tag and modify the CSS as follows:

.input::placeholder {
    color: transparent;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VueJS with Vuetify: Issue with draggable cards in a responsive grid

I am currently working on creating a gallery that allows users to rearrange images. To test this functionality, I am using an array of numbers. It is important that the gallery is responsive and displays as a single column on mobile devices. The issue I ...

javascriptvue.jsvuetify.jsvuedraggable

Creating Projects Without a Build System in Sublime Text 3

I'm having trouble getting the sublime build system to function properly. When attempting to run my code, I receive a "No Build System" error message. I have already set the build system to Automatic under Tools->Build Systems and saved the file a ...

javascriptnode.jssublimetext3build-system

Achieve automated zooming out using highcharts-ng through code

Currently, I am using Highcharts-ng as seen on https://github.com/pablojim/highcharts-ng Upon inspecting the source code, I have noticed some interesting functionalities in the directive utilizing scope.$on which I can leverage for broadcasting. One examp ...

javascriptjqueryangularjshighchartshighcharts-ng

When the response is manually terminated, the next middleware layer in express.js is invoked

I recently noticed an unusual occurrence: Even though I am explicitly ending the request using res.json() in one express middleware, the request still cascades down to the next middleware. It is important to mention that I am not utilizing next() anywhere ...

javascriptnode.jsexpress

Discover the geolocation data for post code 0821 exclusively in Australia using Google Maps Geocoding

I'm having trouble geocoding the Australian postcode 0821. It doesn't seem to reliably identify this postcode as being located within the Northern Territory, unlike 0820 and 0822 which work fine. Here's an example of what I'm doing: ...

javascriptgoogle-mapstypescriptgoogle-geocoder

Updating CSS for dropdown menu in Fluent/Fabric design

I am working with a dropdown component from Fluent UI and I am trying to customize the CSS of the dropdown options. Although I can add classes using className to the dropdown itself, I am facing difficulty in styling the dropdown options directly due to th ...

cssreactjsfluent-ui

Revolutionizing Interaction: Unveiling the Power of Bootstrap 3

Would you be able to assist me in customizing buttons to resemble a typical dropdown link? <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown <span class="caret"&g ...

csstwitter-bootstraptwitter-bootstrap-3

Is it possible to utilize Webpack 5's ChunkGroup API with several entries?

I am encountering an error message when attempting to upgrade from Webpack 4 to Webpack 5. The error states: Module.entryModule: Multiple entry modules are not supported by the deprecated API (Use the new ChunkGroup API) I have searched for information o ...

javascripttypescriptnpmwebpackweb-applications

What is the best way to justify Bootstrap 5 navbar items to the right side?

How can you right-align Bootstrap 5 navbar items? In Bootstrap 4, it was ml-auto. However, this does not work for Bootstrap 5. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

htmlcssnavbarbootstrap-5text-align

Optimal approach to displaying views with Express.js and EJS

Recently, I came across a website that only renders EJS templates using Express.js routing. All the routes are defined in the /routes/index.js file. As the file grows with more routes being added, I am thinking about restructuring it to make it more develo ...

javascriptexpressejs

Mongoose consistently fails to properly save dates

I have created a Mongoose model and included a birthdate field in the following way: birthdate: { type: Date, required: [true, "Please enter a birthdate"], lowercase: true, validate: [isDate, "Please enter a valid birthdate&q ...

javascriptnode.jsmongodbmongoose

How can you swap out a forward slash in vue.js?

I am facing a coding issue that I need help with: <template slot="popover"> <img :src="'img/articles/' + item.id + '_1.jpg'"> </template> Some of the numbers in my item.id contain slashes, leadin ...

javascriptvue.js

Use Backbone.js to dynamically insert partial views based on specific routes, similar to how ng-view works in AngularJS

After gaining experience with AngularJs, I am now looking to dive into Backbone.js. However, I am struggling to understand how this library handles routes and partial views/templates "injection". In Angular, we can easily set up static components like th ...

javascripthtmlangularjsbackbone.js

Enclose an <img> tag within a <span> element and use jQuery to assign a class to the <span>

I am trying to wrap a specific <img> tag with a <span> element and assign a class to the <span>. Below is the relevant code snippet: <img id="wrapped-image" alt="" src=""> Despite my efforts, the following code does not seem to w ...

jqueryhtmlcss

Using AJAX to submit a single form

Within my HTML view, I have multiple forms that are displayed using a PHP foreach loop. One of the form examples is as follows: <form method="POST" class="like-form-js"> <input type="hidden" name="post_id" value="<?= $post['i ...

javascriptphpjqueryhtmlajax

Tips for efficiently storing and accessing data obtained from the "RESTBuilder" tool on the Total.js platform

After stumbling upon this informative tutorial on how to build a cryptocurrency comparison site with VueJs, I was inspired to create a single-page application using the total.js platform. My goal is to fetch the list of coins from the "coinmarketcap.com" A ...

javascriptnode.jstotal.js

Is it possible to redirect a URL with a readyState of 4?

Is it possible to redirect to a page when the readyState is equal to 4? //load the send form if (sendRequest) { sendRequest.open("POST", urlRequest, true); sendRequest.setRequestHeader("Content-Type", "application/x-www-form-urlenc ...

javascriptajax

Is there a text form in Angular that allows only numerical input?

Here's an input form in Angular that I'm working on: <input ng-model="sc.zip" class="form-control" maxlength="5" type="text" /> I want to keep the form as a simple empty textbox without limiting it to only numbers. However, I do want to r ...

javascriptangularjsformstextinput

Issue: Unhandled TypeError: Problem detected when calling storage.set(object items, optional function callback) in a Chrome Extension

Attempting to create my first Chrome extension, focusing on blocking access to specific websites like Facebook or Instagram. Using code to close tabs if the blocked sites are accessed. In a separate HTML file, providing users with two radio button options ...

javascriptgoogle-chromegoogle-chrome-extension

Having trouble with a lengthy formula in your Google Sheets Apps Script function? You may encounter an error like `SyntaxError: missing ) after argument list line: 14 file: new line.gs`. Let

The Apps Script function being discussed: function insertNewRow() { var ss = SpreadsheetApp.openById("redactedforprivacy"); var sheet = ss.getSheetByName("Main"); sheet.insertRowBefore(2); var date = new Date(); var month = date.getMonth() + 1 ...

javascriptgoogle-apps-scriptgoogle-sheets