The input field or help text fails to change to a red color when the field contains invalid information

Question

The input field or help text fails to change to a red color when the field contains invalid information

Previously, I developed an Angular 2/4 application using Bootstrap 3 and Reactive Forms for field validation. In this setup, when there was an error in input fields, the border of the field turned red and an error message would display below the field in red font.

Here is an example of how it appeared:

<div class="form-group row"
                [ngClass]="{'has-error':    (sourcesForm.get('sourceName').touched || 
                                            sourcesForm.get('sourceName').dirty) && 
                                            !sourcesForm.get('sourceName').valid }">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" />
                    <span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>

Currently, I need to transition to Bootstrap 4 but I am facing challenges as neither the error message nor the input-field turns red anymore. How can I achieve the same effect with Bootstrap 4? I attempted changing the class of the parent span block to "form-text" but without success.

html css twitter-bootstrap angular bootstrap-4

Answer 1

Answer №1

If you're interested in the beta version of Bootstrap v4, feel free to explore the Form validation docs for detailed information. This version introduces a new approach to form validation supported by modern browsers that utilizes valid and invalid CSS classes like .was-validated and .invalid-feedback.

For a quick start using Bootstrap 4 beta, here's a code snippet:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  "use strict";
  window.addEventListener("load", function() {
    var form = document.getElementById("needs-validation");
    form.addEventListener("submit", function(event) {
      if (form.checkValidity() == false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add("was-validated");
    }, false);
  }, false);
}());
</script>

For those looking for an approach similar to Bootstrap 3, server-side validation can be used with .is-invalid and .is-valid classes as explained below:

As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.

In case you need information on the alpha version of Bootstrap V4, refer to the Bootstrap V4 Form Validation Docs where examples are provided for your reference.

To adapt from the alpha version to the beta version, remember to change has-error to has-danger.

Answer 2

If you're interested in the beta version of Bootstrap v4, feel free to explore the Form validation docs for detailed information. This version introduces a new approach to form validation supported by modern browsers that utilizes valid and invalid CSS classes like .was-validated and .invalid-feedback.

For a quick start using Bootstrap 4 beta, here's a code snippet:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  "use strict";
  window.addEventListener("load", function() {
    var form = document.getElementById("needs-validation");
    form.addEventListener("submit", function(event) {
      if (form.checkValidity() == false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add("was-validated");
    }, false);
  }, false);
}());
</script>

For those looking for an approach similar to Bootstrap 3, server-side validation can be used with .is-invalid and .is-valid classes as explained below:

As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.

In case you need information on the alpha version of Bootstrap V4, refer to the Bootstrap V4 Form Validation Docs where examples are provided for your reference.

To adapt from the alpha version to the beta version, remember to change has-error to has-danger.

Answer 3

Answer №2

Here is the resolved answer:

<div class="form-group row">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            [ngClass]="{'is-invalid':    (sourcesForm.get('sourceName').touched || 
                                sourcesForm.get('sourceName').dirty) && 
                                !sourcesForm.get('sourceName').valid }"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" >
                    <span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>

I added [ngClass] to the input tag and assigned it the class is-invalid. I also modified the parent span-class to invalid-feedback.

Answer 4

Here is the resolved answer:

<div class="form-group row">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            [ngClass]="{'is-invalid':    (sourcesForm.get('sourceName').touched || 
                                sourcesForm.get('sourceName').dirty) && 
                                !sourcesForm.get('sourceName').valid }"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" >
                    <span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>

I added [ngClass] to the input tag and assigned it the class is-invalid. I also modified the parent span-class to invalid-feedback.

Answer 5

Answer №3

Although your question may be from a while ago, it's still important to know the best way to validate form-control input fields using reactive forms and Bootstrap 4 for displaying validation. To start, you'll need to add some code to your form:

<form [formGroup]="myForm">
  <div class="form-group">
   <label for="name">First Name: </label>
   <input type="text" class="form-control" formControlName="firstName" id="name">
   <div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
   <div *ngIf="firstName.errors.required">Filling in the name is required!</div>
   </div>
  </div>

In your TypeScript file, you need to implement the logic for conducting the validation.

In the TypeScript file:

 myForm = new FormGroup({
 'firstName':new FormControl('',Validators.required)

 })
 // Getter method
 get firstName(){
 this.myForm.get('firstName');
 }

By following these steps, you will see that the validation is now working. To style the input field with a red border around any invalid inputs, simply add the following CSS class to the component's CSS file:

 .form-control.ng-touched.ng-invalid{border:2px solid red;}

Now you can easily observe the results of your form validation.

Answer 6

Although your question may be from a while ago, it's still important to know the best way to validate form-control input fields using reactive forms and Bootstrap 4 for displaying validation. To start, you'll need to add some code to your form:

<form [formGroup]="myForm">
  <div class="form-group">
   <label for="name">First Name: </label>
   <input type="text" class="form-control" formControlName="firstName" id="name">
   <div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
   <div *ngIf="firstName.errors.required">Filling in the name is required!</div>
   </div>
  </div>

In your TypeScript file, you need to implement the logic for conducting the validation.

In the TypeScript file:

 myForm = new FormGroup({
 'firstName':new FormControl('',Validators.required)

 })
 // Getter method
 get firstName(){
 this.myForm.get('firstName');
 }

By following these steps, you will see that the validation is now working. To style the input field with a red border around any invalid inputs, simply add the following CSS class to the component's CSS file:

 .form-control.ng-touched.ng-invalid{border:2px solid red;}

Now you can easily observe the results of your form validation.

The input field or help text fails to change to a red color when the field contains invalid information

Answer №1

Answer №2

Answer №3

Similar questions

How to style a triangle-shaped border with CSS transparency

Occasionally, the popup fails to open when a button is clicked. What could be causing this issue? -Asp.net

Steps for passing a JSON object as a PathVariable in a Spring controller

Positioning with Bootstrap CSS libraries

The uppermost part is malfunctioning

Designing tables and adherence to WCAG 2 accessibility standards

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

Connect to a particular section of the webpage with additional top spacing

Customize Bootstrap 5: Changing the default color scheme

What causes variations in layouts when using the same CSS grid code across different pages?

Updating data within rows in Angular 4

How to create a stylish border line to separate rows using CSS

Mobile View Not Displaying Bootstrap Column

Updating an existing Observable asynchronously using the pipe method

Learn how to maintain floating labels in a floating state even after text input using only CSS

What could be causing my jQuery handler to not capture my form submission?

Tips for identifying when a View has completed rendering?

Ensuring only one group is open at a time in jQuery when a new group is opened

What is preventing form validation from functioning properly with both built-in and cross-field validators?

AngularJS function orderBy reverses the array instead of sorting it