``Advanced Web Development: Dealing with HTML5, CSS3, and

I am facing an issue while implementing a design from the CSS and HTML login form templates on my project.

Below is the snippet of my HTML:

<p id="firstname_line">
    <label>First Name:</label>
    <input type="text"  name="firstname" id="firstname" required pattern="^[a-zA-Z]+$"><span title="Name should contain only letters!"></span>
</p>

And here is my CSS code:

#firstname_line input:invalid ~ span:after {
    opacity: 1;
    color:green;
}
#firstname_line input ~ span:after {
    content:attr(title);
    color:red;
    margin-left:.6rem;
    opacity: 0;
    transition: 1s 1s opacity linear;
}
#firstname_line span {
    color: red;
    display: block;
}

However, when I try to integrate this example into my project, I encounter a strange problem across all browsers. Upon loading the page, if the input field is empty, it is being treated as ":valid", rather than ":invalid". Both classes #firstname_line input:invalid ~ span:after and #firstname_line input ~ span:after { are applied initially, causing the span element to be visible. In contrast to the expected behavior shown in the example, the span element shouldn't be visible on load.

Could someone kindly suggest where the issue might lie?

Answer №1

Let's start by simplifying:

div input ~ span:after {
  content: attr(title);
  display: none;
}

div input:invalid ~ span:after {
  display: inline;
  color: red;
}
<div>
  <input type="text" required pattern="^[a-zA-Z]+$">
  <span title="Name should contain only letters!"></span>
</div>

The reason why the span is displaying the styling from the :invalid pseudo-selector is because the input field has the required attribute, which initially makes it invalid.

If you remove the required attribute, the :invalid styling will not be applied to a blank field.

div input ~ span:after {
  content: attr(title);
  display: none;
}

div input:invalid ~ span:after {
  display: inline;
  color: red;
}
<div>
  <input type="text" pattern="^[a-zA-Z]+$">
  <span title="Name should contain only letters!"></span>
</div>

An issue with this solution is that the field is no longer required for form submission. If the field is left empty, the regex test will not be triggered, and the form will submit.

Pure CSS cannot detect if a field is blank beyond the initial page load since the DOM does not update as the user types. This is why using Javascript is a more reliable way to validate forms client-side.

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

Guide to repairing a CSS ball animation

I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving from top right -> bottom center -> top left (/). #stage { height:300 ...

The output of VueJs hooks shows a blank refs object first, followed by the referenced elements

Below is the HTML VueJS code sample that I am working with: <div v-for="site in topSites" ref="ts"><a :href="site.url"> ... </div> Update: Here is the full div code: <div v-for="site in topSites& ...

Dynamic font size that adjusts as you change the window dimensions

Is there a way to adjust the font size in HTML so that when I resize the window, the text size adjusts accordingly? It's like setting a percentage for the text based on the size of the container it is in. Let me provide an example of what I have in m ...

Arranging pictures in both vertical and horizontal alignment (CSS)

I've been attempting various methods to solve this issue, but none have proven successful. My goal is quite simple: align images both horizontally and vertically in a manner that fills empty spaces with photos. Similar to the layout here: The challe ...

What is the best way to add multiple lines of text to a webpage using the span element?

Currently, I am developing a game that involves using a map, which consists of multiple lines. My question is whether it is possible to have the span tag cover multiple lines while ensuring that each line ends with a new line character. Below is an exampl ...

What is the best way to link a generated PHP-AJAX link with a jQuery action?

Imagine a scenario like this: trollindex.htm: [...] <script> $(document).ready(function(){ $("* a.jquery").on("click",function(){ $.ajax({ type: "POST", url: "trollcommander.php", data: ({comman ...

Arranging list items on top of each other without using absolute positioning

Hey there! I am trying to figure out a way to stack list items containing images on top of each other, like a deck of cards, but without resorting to absolute positioning. I attempted to do it using absolute positioning, here's what I came up with: ...

Is there a way to mix up the sequence of information when replying?

There have been numerous instances where this question has been raised and addressed, such as here, here, and here. However, those discussions pertained to Bootstrap 4, which is approaching its End of Life as of today, 2021-10-20. Given that Bootstrap 5 i ...

Importing ReactDOM alone does not result in the rendering of anything

Having just started delving into the world of React, I've been grappling with getting a React app up and running. Despite my efforts, all I can manage to see is a blank page. Can anyone offer some assistance? HTML Markup (index.html) <html> & ...

Is it acceptable to conceal items by utilizing display:none?

When dealing with a dynamic website that includes components from various plugins, is it acceptable to hide elements temporarily or permanently using display:none? Sometimes clients may request certain items to be hidden from the page, so instead of removi ...

Showcasing a dynamic image as a task is being completed within a JavaScript function

Is there a way to show a loading image while waiting for a JavaScript function to finish? <script type="text/javascript"> function create() { //Perform operation } </script> I am looking for a solution to display a loading image until ...

Custom override of SX prop classes with Material-UI theme

I am currently working on customizing a component using the sx MUI prop. <Typography variant='h1' align='center' sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }} > ...

Where would you start looking if the right side of a table border is not visible?

Where should I start looking if the right side border of a table element in a div is not visible? ...

Simple HTML and CSS exercise for beginners to grasp the concept

I'm looking to modify the layout of a specific webpage at based on the following instructions: First, insert this link within the <head> <link rel="stylesheet" href="https://trafficbalance.io/static/css/sdk/sdk.css"> -next, add th ...

Obtaining the value of an input field in HTML

I am currently working on a text input field that triggers a JavaScript function when a numeric value is entered. <input type="text" value="key" ng-keypress="submit(key)" ng-model="pager.page"/> Controller $scope.submit = function (val) { ...

Creating a Facebook link widget similar to Grooveshark: A Step-by-Step Guide

Recently, I shared a Grooveshark link on Facebook (like http://grooveshark.com/s/Toothpaste+Kisses/3gGocy?src=5) and to my surprise, the link appeared to be normal at first. However, once clicked, it magically transformed into a Flash widget like this. The ...

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

Tips for changing color when hovering over elements in a CSS grid

I am currently attempting to incorporate a hover effect into this CSS grid, but I have not been successful in my efforts. I experimented with transition and opacity techniques, but they did not work as expected. Can someone please point out what I may be ...

What could be causing the incorrect display of updates when my Grails checkbox onclick remote function Ajax call is triggered

Hi, I have a page named taskReminder that renders two templates: one for tasks and another for reminders. The task template includes a checkbox that, when checked, should update the task list. Everything is functioning correctly, but there seems to be an i ...

Updating the scope variable in an AngularJS directive

Recently delving into Angular, I encountered an issue: I have both a list view and a details view with tags. To facilitate navigating between the two views and loading new elements from a service upon click events, I created a directive. My aim is to also ...