Utilize Bootstrap's custom validation exclusively on fields that are invalid

Exploring Bootstrap features has led me to wonder if there's a straightforward method to change the styling of a field specifically when it is considered invalid.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c100c11">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
  <form class="needs-validation was-validated" novalidate>
    <label for="sample" class="form-label">Number</label>
    <input type="number" class="form-control" id="sample" min="1" step="1" required />
  </form>
</div>

The code snippet I'm tinkering with currently allows me to toggle the input field's color between green and red based on its validity. However, my goal is for the field to only turn red when it's invalid and remain gray (without the green check mark) when valid.

htmlcssbootstrap-5

Answer №1

Applying specific CSS classes can help undo Bootstrap styling changes:

.container .form-control.is-valid, .container .was-validated .form-control:valid {
    border-color: initial;
    background-image: none;
    padding-inline-end: 12px;
}

.container .form-control.is-valid:focus, .container .was-validated .form-control:valid:focus {
   border-color: initial;
   box-shadow: initial;
}

This code will ensure that only the red/invalid styles are maintained.

Demo:

.container .form-control.is-valid, .container .was-validated .form-control:valid {
    border-color: initial;
    background-image: none;
    padding-inline-end: 12px;
}

.container .form-control.is-valid:focus, .container .was-validated .form-control:valid:focus {
   border-color: initial;
   box-shadow: initial;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f74687469">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
  <form class="needs-validation was-validated" novalidate>
    <label for="sample" class="form-label">Number</label>
    <input type="number" class="form-control" id="sample" min="1" step="1" required />
  </form>
</div>

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

Encountering a problem with the multi-page template structure in jQuery Mobile

As a newcomer to Phonegap, I am utilizing jQuery Mobile and HTML5 for the development of an Android app. The app consists of three pages: the first page, index.html, displays a list of contents; the second page holds text content as well as a header with b ...

androidhtmljquery-mobilecordova

I am experimenting with showcasing a series of Bootstrap div elements, each containing a dynamic carousel of images sourced from a database along with additional information

My image display is working fine, but the other divs are appearing within the first div and the additional information like title and description are not showing. I'm aiming to have six rows, each with two columns, displaying a carousel of images and ...

phphtmlcarouselbootstrap-5

Error encountered while parsing Google Map link in Razor.Parse

Situation Within my application, I am utilizing Razor.Parse<>() to parse text, links, and tags to HTML. string Razor.Parse<TEmail>(string razorTemplate, TEmail model) where TEmail : BaseEmail I utilize the symbol '@' to extract dat ...

c#htmlparsingrazor

Trigger javascript function with a button click

Is there a way to trigger a JavaScript function from an HTML button that is not functioning properly? REVISED To see the issue in action, please visit this jsfiddle link: http://jsfiddle.net/winresh24/Sq7hg/341/ <button onclick="myFunction()">Try i ...

javascripthtmlbutton

Tips on positioning a dropdown item to the far right of the page

I need help moving the language switcher and its items to the right side of the page. I tried using ml-auto but it didn't work for me. Whenever I try to adjust the position with padding-left, all the items end up in the center of the page. Any suggest ...

htmlcssbootstrap-4

"Utilizing AngularJS to set an element's position as fixed relative to a different

Imagine an app that can place input text fields on top of an image, creating a workspace. The challenge is to position these fields using specific coordinates (top, left, width, height) that are relative to the image itself (top/left = 0/0). How can one ac ...

cssangularjsangularjs-directive

A growing flexbox container that expands to a specific height before allowing for scrolling

In the case of a fixed height container with two vertical divs, I am aiming for the first div to be as tall as its content, up to 80% of the parent div's height. After that point, the content within the first div should scroll. The second div will the ...

htmlcssflexboxoverflow

Utilizing CSS files to incorporate loading icons in a component by dynamically updating based on passed props

Is it possible to store icons in CSS files and dynamically load them based on props passed into a component? In the provided example found at this CodeSandbox Link, SVG icons are loaded from the library named '@progress/kendo-svg-icons'. Instea ...

javascriptcssreactjstypescriptkendo-ui

PHP POST request with an additional value being sent

Greetings as this is my debut post! Currently, I am facing a challenge in my project. As seen in the screenshot provided, I have several names fetched from the database and displayed in the main menu. Upon clicking the "modal" button, a Bootstrap modal wi ...

phphtml

"Troubleshooting the lack of background image display in Next.js when using

Can anyone help me figure out why my background image disappears when I add a linear gradient? It shows up fine without the gradient, but as soon as I include it, the image vanishes. <div className="hero" style={{background: "linear-grad ...

cssreactjsnext.js

Creating virtual hover effects on Android browsers for touch events

My Wordpress website is currently utilizing Superfish 1.5.4 to display menu items. The menu on my site includes several main menu items, which are clickable pages, and hovering over these main items should reveal sub-menu options. When I hover over a mai ...

javascriptandroidjquerycss

Clearing user's browsing data

I managed to successfully set up a user cookie, but I'm having trouble getting it to be destroyed or terminated when the user logs out. Any assistance on this matter would be highly appreciated! I am new to PHP and still in the learning process. Here ...

phphtml

Generating elements added at various depths within an HTML document with the help of JavaScript

create_new.append("div") .append("form").merge(update_5) .attr("action", d => d.market) .attr("target","_blank") .style("width","100%") .style("height","282") .append("input").merge(update_5) .attr("type","submit") ...

javascripthtml

What is the process for transforming the search bar into an icon located at the top of a WordPress site?

For the past few weeks, I've been attempting to convert the search bar on my website (which is currently a plugin) into an icon positioned near the header. I've experimented with modifying the child theme's functions.php, the parent theme&a ...

phpcsswordpress

Issue with JavaScript function not triggering in Internet Explorer

Here is the code snippet I am working with: <body onLoad="subcatSelection();"> The function that should run on body load is located in a .js file that is included using this code: <script type="text/javascript" src="bincgi/search_lists.js"& ...

javascripthtmlinternet-explorerbrowser

Can you explain the difference between the <li> and <div> elements in HTML? How are they used differently

I'm currently exploring the elements for Selenium usage. I have a question about the <li> tag in HTML - could you explain its significance to me? Also, how does it differ from the <div> tag? ...

javahtmlselenium

Challenges encountered while using Selenium WebDriver to upload images

I'm having trouble adding an image as a normal attachment to an email (not as an inline image). When inspecting the HTML DOM with Firebug, I noticed there are two elements with xpath //input@type='file', which is due to the presence of two b ...

javascripthtmlseleniumxpath

Tips for showing a multiline string in a textarea

Setting the value of a textarea is straightforward: var foo='<div>Some html</div>\r\nSome html<br /><br />\r\n\r\n<div >Some html</div>\r\n</b>'; $('#my_texta ...

jqueryhtmlajax

The dimensions of a Tumblr video

Hi there! I have a question regarding my tumblr theme. The space allocated for video posts on the home page is perfect, but when I click on the permalink, it becomes too small. I don't want to change the size of the video on the home page, so is there ...

htmltumblr

The modal box should adjust its height to perfectly accommodate the content within

I'm in the process of developing a straightforward modal (popup) window, using as few lines of code as possible... just the basics. The modal has a maximum width of 650px and its height adjusts to fit the content. In case the content exceeds the avai ...

htmlcss