Tips for customizing a red error input box in AngularJS when the cursor is present but no content has been entered

Question

Tips for customizing a red error input box in AngularJS when the cursor is present but no content has been entered

I am working on implementing validation in my form using AngularJS. My goal is to have the input box turn entirely red when there is an error. Currently, after I receive an error and delete the text with the cursor still inside the box, the color of the box turns blue while the border remains red. I want the entire box, including the background, to be red in this scenario. Right now, the full red color only appears when I click outside the box, but I want it to display fully red even if no text is present in the box but the cursor is still inside.

.registration-form .has-error .form-control, .registration-form .has-error .form-control:focus, .registration-form .has-error .form-control:hover, .registration-form .has-error .form-control:active{
        border-color: red;
   box-shadow: none !important;
   background-color: red !important;
}

.registration-form label{
    font-weight: normal;
}

.registration-form .form-group input[type="text"]:focus{

    background-color:#18b6d6 !important;

 }

Can someone provide guidance on how to achieve this? If needed, here is a plunker link for reference-

https://plnkr.co/edit/fFYhRMioVOMCyXWSYvUJ?p=preview

html css angularjs forms validation

Answer 1

Answer №1

.registration-form .form-group input[type="text"]:focus{

    background-color:#18b6d6; /* remove !important from here */

 }

Removing the !important makes it work like a charm!

Answer 2

.registration-form .form-group input[type="text"]:focus{

    background-color:#18b6d6; /* remove !important from here */

 }

Removing the !important makes it work like a charm!

Answer 3

Answer №2

Could this be the blue highlight for enhancing input field accessibility? This question seems to have already been addressed multiple times on StackOverflow.

input[type="text"], textarea {
    outline: none;
    box-shadow:none !important;
    background-color:#18b6d6;
}

Answer 4

Could this be the blue highlight for enhancing input field accessibility? This question seems to have already been addressed multiple times on StackOverflow.

input[type="text"], textarea {
    outline: none;
    box-shadow:none !important;
    background-color:#18b6d6;
}

Answer 5

Answer №3

By including the bootstrap library, you can easily style input boxes to appear red when errors occur:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

Here is a simple demo example:

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    
  });

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
</head>

<body ng-controller="mainCtrl">
  <form novalidate name="form">
    <div class="form-group" ng-class="{ 'has-error' : form.input.$touched && form.input.$invalid }">
      <label>Input</label>
      <input type="text" class="form-control" name="input" ng-model="input" required>
      <span ng-if="form.input.$touched" class="help-block">Plan No. is required.</span>
    </div>
  </form>
</body>

</html>

In addition, using ngMessages for validating inputs can enhance your application's flexibility. I recommend checking out this helpful tutorial.

You can find a complete code example utilizing ngMessages here. Feel free to take a look at it.

I hope this information proves useful!

Answer 6

By including the bootstrap library, you can easily style input boxes to appear red when errors occur:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

Here is a simple demo example:

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    
  });

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
</head>

<body ng-controller="mainCtrl">
  <form novalidate name="form">
    <div class="form-group" ng-class="{ 'has-error' : form.input.$touched && form.input.$invalid }">
      <label>Input</label>
      <input type="text" class="form-control" name="input" ng-model="input" required>
      <span ng-if="form.input.$touched" class="help-block">Plan No. is required.</span>
    </div>
  </form>
</body>

</html>

In addition, using ngMessages for validating inputs can enhance your application's flexibility. I recommend checking out this helpful tutorial.

You can find a complete code example utilizing ngMessages here. Feel free to take a look at it.

I hope this information proves useful!

Tips for customizing a red error input box in AngularJS when the cursor is present but no content has been entered

Answer №1

Answer №2

Answer №3

Similar questions

Unfortunately, Node Sass does not have compatibility with your current environment, which is Windows 64-bit with an unsupported runtime

How can I extract data from a PHP page without using a form in order to perform a query on MSSQL?

Regex: Identifying all URLs except for those with ".js" or ".css" included

Header Button and Dropdown Divs Alignment

Retrieving Data with AngularJS: Making HTTP Calls and Handling Responses

Eliminating the gray background using CSS

Conceal descendant of list item and reveal upon clicking

Exploring how to display JSON objects containing spaces in an HTML table

Issue with scrolling to the bottom of collapsed sections in Bootstrap

What are the steps for utilizing CSS Global Variables?

Incorporation of a dynamic jQuery animation

Get the large data file in sections

What is the best way to refresh a webpage in Vue.js following a specific event or a button click?

Unable to set items as sticky within mat-tabs

The html select option tag is automatically closed because of the presence of the "/" character within the dynamic value in JSP and JSTL

What is the best way to position a small square box over each td element containing text using css?

The overflow hidden property in Tailwind CSS is not functioning properly during animations

Guide on updating a nested field in the user document in Baasbox via a webservice call

My initial junior UI/UX assignment: Can you confirm whether this form modal dialog is pixel-perfect, and offer any suggestions for improvements

Utilizing jQuery AJAX to efficiently handle branching based on the result received