Enhance your form input-group in Bootstrap-4 by adding a stylish border and background-color through validation

I'm working on a form using Bootstrap 4 and I need to display validation errors. Specifically, I want the text field with an input-group for the password to have the same styling as the Username field when there is an error (i.e., red border and background color applied to the full width). Is there a way to make this happen?

https://i.sstatic.net/qil8y.png

<div class="form-group">
    <label>Username</label>
    <input class="form-control input-validation-error" type="text" id="Input_UserName" name="Input.UserName" value="">
    <span class="text-danger field-validation-error">Username is a required field</span>
</div>
<div class="form-group">
    <label>Password</label>
    <div class="input-group">
        <input type="password" class="form-control border-right-0 input-validation-error" data-password-input="toggle-password-view" id="Input_Password" name="Input.Password">
        <div class="input-group-append">
            <span class="input-group-text border-left-0 bg-transparent" data-view="toggle-password">
                <span id="password-toggle" class="small">show</span>
            </span>
        </div>
    </div>
    <span class="text-danger field-validation-error">Password is a required field</span>
</div>
htmlcssasp.net-corebootstrap-4razor-pages

Answer №1

Utilize the class input-validation-error as a reference point for this task... then examine the adjacent elements and their children to implement customized styling

$(document).ready(function() {
  $("input.input-validation-error").css('border', '1px solid red').css('background', 'pink');
  $("input.input-validation-error").siblings('.input-group-append').children('span').css('border', '1px solid red').css('padding', '0');
  $("input.input-validation-error").siblings('.input-group-append').children('span').children('span').css('background', 'pink').css('padding', '.525rem .75rem');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="form-group">
  <label>Username</label>
  <input class="form-control input-validation-error" type="text" id="Input_UserName" name="Input.UserName" value="">
  <span class="text-danger field-validation-error">Username is a required field</span>
</div>
<div class="form-group">
  <label>Password</label>
  <div class="input-group">
    <input type="password" class="form-control border-right-0 input-validation-error" data-password-input="toggle-password-view" id="Input_Password" name="Input.Password">
    <div class="input-group-append">
      <span class="input-group-text border-left-0 bg-transparent" data-view="toggle-password">
                <span id="password-toggle" class="small">show</span>
      </span>
    </div>
  </div>
  <span class="text-danger field-validation-error">Password is a required field</span>
</div>

<div class="form-group">
  <label>Password2</label>
  <div class="input-group">
    <input type="password" class="form-control border-right-0 " data-password-input="toggle-password-view" id="Input_Password" name="Input.Password">
    <div class="input-group-append">
      <span class="input-group-text border-left-0 bg-transparent" data-view="toggle-password">
                <span id="password-toggle" class="small">show</span>
      </span>
    </div>
  </div>

</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

The functionality of the <button type="button"> is currently failing to submit the data as intended

I am currently facing an issue with retrieving the value from a date-picker in my post method. I need to select the date using a button, and after selecting the date, I want to retrieve its value in the post method. However, when I click on the submit butt ...

phpcodeigniterbootstrap-4

Mobile Device Experiencing Constant Resizing Issues on Website

I have been working on my website for almost a year now, and I am facing an issue with its responsiveness on mobile devices. Despite using Bootstrap 4 and Ajax to load pages and modals, I can't seem to figure out what's causing the problem. Befor ...

ajaxhtmlcssbootstrap-4

"PHP Dilemma: Navigating the Ajax Button Press Situation

I've been attempting to create a button that triggers a PHP script on a webpage and updates only a specific div tag, but so far I haven't had any success. Removing the $ajax section of the script allows my buttons to change states, but as soon as ...

javascriptphpjqueryhtmlajax

Creating a visually balanced footer in your webpage is essential to providing a cohesive design. Learn how to perfectly align left

Struggling to align my footer text in a straight line. As a beginner, I hope this question isn't too basic! Check it out below: https://i.sstatic.net/ZophZ.png I want those three lines to be in perfect alignment. I've been taught a grid method ...

htmlbootstrap-4footerstyling

Strange symbols were stored in the database after saving the textarea value

After submitting a form, text entered into a text area is being saved to my database. However, in one instance, certain characters such as • are appearing in the field. For example: • Text When retrieving the data from the database using Jav ...

javascriptjqueryhtmldatabasecharacter-encoding

Issues with Bootstrap 5 navbar-light and font style rendering on Edge browser

My website seems to be having compatibility issues with Microsoft Edge. While everything works fine on Chrome, the navbar classes "navbar-light" and "bg-light" do not apply properly in Edge, and the font style defaults. I am using Bootstrap 5 and webfonts ...

htmlcsstwitter-bootstrapmicrosoft-edgebootstrap-5

What is the best way to align three images horizontally using bootstrap?

While working on my JavaScript class and creating one-page web apps, I had the idea to create a central hub to store and link them all together. Similar to Android or iOS layouts, I designed a page with icons that serve as links to each app. I managed to ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Navigating Through Secondary Navigation with Ease

In my React project, I am developing a mega-menu styled dropdown navigation. As a functional component, I am utilizing the useState hook to manage the state and control the display of sub-navigation items. The functionality of the dropdown is operational, ...

javascriptcssreactjs

Utilizing Flask to insert data into a MySQL database table

Hey there, I'm running into some trouble with inserting values into my database. While I can successfully log in using the same method on the sign-up page, I've tried various options without success. Below is my Python code: from flask import F ...

pythonhtmlcssmysqlflask

Looking to crop a canvas without changing its dimensions using jQuery

I'm currently working on a project that involves overlaying two images; one uploaded by the user and the other a default image. However, I am facing an issue when the uploaded image is a rectangle instead of a square, causing the canvas to resize it. ...

javascripthtmljquerycanvasoverlay

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...

javascriptjquerycssjsonsearch

How can you use only CSS (without jQuery) to hide a div and display another?

Is there a way to keep Collapse 2 directly under Collapse 1 when Content 1 is displayed? I attempted to reorganize the code, but it resulted in chaos. :D .collapse{ cursor: pointer; display: block; background: #cdf; } .collapse + input{ displa ...

csshideshow

Absolute positioned TD creates a gap upon being displayed

Hey there, I am facing an issue with a table I have. In each row (TR), the last TD element has a class called 'abs'. The style for this class is specified in the provided code snippet. Initially, this element is hidden. However, when you hover o ...

jqueryhtmlcss

Steps for updating a text box with new values and verifying the count using selenium web driver

Currently dealing with a problem where I need to track if the number of values in a text box field has surpassed 5. If it hasn't, I'm able to input more values, but if it has reached 5, then no more values can be entered. An image of the screen a ...

seleniumselenium-webdrivertextboxbootstrap-4

showing a pair of divs in a split layout on the homepage

I have a partially split homepage with two sections using Twitter Bootstrap v5.1.3 for the layout. The left side consists of two divs, one for text and one for an image. These divs are contained within a flex-parent, giving them an inline-block appearance ...

htmlcssbootstrap-5

Reasons for aligning inline elements with input boxes

I am facing a challenge with aligning a series of inline elements, each containing an input text box, within a single row. The number and labels of these input boxes can vary as they are dynamically loaded via AJAX. The width of the div housing these inli ...

javascripthtmlcss

One-click process succeeds where two clicks fail

The code below is intended to go through a two-click process as follows: First click on .imagenes decreases opacity and makes .logo visible. Second click on .imagenes returns the opacity to 1 and hides .logo again. However, during this cycle of two ...

javascripthtmlcss

HTML set hover & active states to remain active indefinitely

NOTE: My project utilizes Angular, so Angular may offer a solution to this issue as well I am in the process of creating a page where I can preview and test out various styles that I have designed. In order to achieve this, I need to somehow activate both ...

htmlcssangular

Learn a simple method of integrating carousels into text elements within a grid using exclusively Bootstrap 5

I need to incorporate a carousel into this section of my code using only Bootstrap 5. However, the current implementation is not functioning as expected (the items are stationary): This is the relevant HTML snippet: <div class="container px-4" ...

htmlcssfrontendcarouselbootstrap-5

How come child elements are clipped in IE versions 9 and above when using the border-radius property with a fixed value?

When applying css border-radius:[some value] to a parent element and having a fixed positioned child element, I noticed that in Internet Explorer the child element appears to be 'clipped' into the parent. However, if I use border-radius:0 in the ...

cssinternet-explorer-9