Can you share the updated class name for indicating errors in input groups in Bootstrap 4?

I am currently working on creating a form. I want to implement a feature where incorrect data entered will be highlighted in red, and correct data entered will be highlighted in green.

This is the code snippet from my .js file:

function checkForm()
{
  var error=false;
  var contactName = document.getElementById("contactName");
  var contactLastName = document.getElementById("contactLastName");
  var contactEmail = document.getElementById("contactEmail");
  var contactInfo = document.getElementById("contactInfo");

  if (contactName.value == "")
  {
    document.getElementById('errorName').className='alert alertdanger';
    error=true;
  }

  // Similar validation checks for other fields

  if (!error)
    return true;
  else
  {
    return false;
  }
}

Here is the form markup:

<form action="index.html#kontakt" method="post" onsubmit="return checkForm();">
      <fieldset>
      <!-- Form fields with error messages -->
      </fieldset>
    </form>

In Bootstrap 3.4.1, I used to simply add this line in my .js file:

document.getElementById("error1").className="form-group has-error";

Now using Bootstrap 4, what is the equivalent of "form-group has-error"?

Furthermore, how can I make the form fields validate the input immediately without submitting the form first?

Answer №1

In-depth information on this topic can be found in the Bootstrap 4 documentation. Here are a few ways to validate forms:

  • Utilize the :valid and :invalid CSS pseudo-classes, which require the form to have the class .was-validated.
  • Alternatively, you can use the .is-valid and .is-invalid CSS classes.

If basic HTML attributes like required or pattern do not suffice for your validation needs, consider implementing custom JavaScript solutions. However, it is advisable to rely on libraries or frameworks for more complex validations.

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

What is the best way to retrieve a file's creation date using the file System module in Node.js

I'm having trouble fetching the filename and file creation date to send to a client. I tried using fs.stat which provides birthtime but does not include the filename. So, my question is: is birthtime equivalent to the file created date? How can I sen ...

Having trouble with rendering prop values in Vue.js?

Struggling to develop an ajax form component in vuejs within a Laravel 5.3 application. It seems I am facing some challenges with displaying the form fields. Can someone lend me a hand? Here is the front end code for rendering the form: <ajax-form ...

Dynamic Creation of a jQuery Selector

Dear, I'm facing an issue while trying to load data dynamically into a table using JSON format. The data is coming from a PHP file. However, despite my attempts, the table remains empty and no data is being displayed. function fetchTableData() { ...

Display alert only when focus is lost (on blur) and a dropdown selection was not made

Utilizing Google Maps Places for autocompletion of my input, I am aiming to nudge the user towards selecting an address from the provided dropdowns in order to work with the chosen place. A challenge arises when considering enabling users to input address ...

Retrieve any webpage using AJAX

Hey there! I'm a beginner in AJAX and have a question that may seem basic to some. I understand that you can set up a page to respond to an AJAX call, but is it possible to request any page with AJAX? In other words, can all the functionalities of a ...

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

Reasons for storing `https.get()` inside a request constant in Node.js

When using simple javascript, any content written to the console is displayed on the console itself. An example would be as follows: const name = "david"; This will display david in the console. However, in Node.js, if I store a request in a const varia ...

Tips for including shared information across different ionic tabs

Is there a way to include some shared content, like a canvas, in between the content of different tabs in Ionic? I want this common content to be displayed across all tabs, while each tab still shows its own dynamic data below it. I attempted to add the c ...

Is it possible to utilize npm packages within a standard web page without any frameworks or libraries?

I am currently working on a basic website created using vanilla HTML, CSS, and JS files. My goal is to incorporate the import { moment } from "moment" syntax into my JS files. However, after adding npm to my project, installing moment with npm i ...

Elegant Box 2 - Ascending to the top when clicked

I am excited to share that I am using FancyBox for the first time in my project. This time, I decided to separate the image from the link for a unique user experience. The hover effect works perfectly fine - the issue arises when the link is clicked and th ...

What is V8's approach to managing dictionaries?

After attending V8 presentations, it became clear to me that it optimizes constructions such as the one below by tagging a type object: function Point(x, y) { this.x = x; this.y = y; } I am curious about what happens if I were to return an object (JS ...

Does creating a form render the "action" attribute insignificant in an AJAX environment?

When submitting forms exclusively through AJAX, is there any advantage to setting the action attribute at all? I have yet to come across any AJAX-form guides suggesting that it can be left out, but I fail to see the purpose of including it, so I wanted t ...

"React and Next.js are causing a return value of undefined on

After spending a few hours working with NextAuth and utilizing the Twitter API for login and tweet searching, I have encountered a minor issue. Setting up most of the things was smooth, but I am facing some problems with fetching API routes on the client ...

Ext.js Ext.grid.Panel with advanced filtering capabilities

I encountered an issue with the following code snippet... Ext.define("Requestor.view.main.RequestGrid", { extend: 'Ext.grid.Panel', // Our base class. A grid panel. ... extensive code ... columns: [ ... additional code ... { ...

The function error is currently in a waiting state as it already includes an

I encountered a particular issue that states: "await is only valid in async function." Here is the code snippet where the error occurs: async function solve(){ var requestUrl = "url"; $.ajax({url: "requestUrl", succes ...

jsTableSorter plugin does not implement styling

I'm having an issue with the application of the jsTableSorter plug-in using the Blue theme. The code I'm using doesn't seem to be applying the style correctly. Can someone help me troubleshoot this problem? <!DOCTYPE HTML PUBLIC "-//W3C/ ...

Unable to receive Ajax response

My current programming setup involves using a combination of JavaScript and PHP to implement an Ajax code. However, at this point in time, the outcome is showing up as undefined. To circumvent this issue, I have resorted to utilizing localStorage to trans ...

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Why does the selectedOptions property of select return an HTMLCollection instead of just one HTMLOptionElement? As far as I understand (correct me if I'm wrong), a select element can only have one selected option, so why do I always need to access it ...

Hold on for the useState object to contain a value

Created a custom hook that fetches the user's location and determines the nearest marker on a map based on that information. Initially, it returns the default value of useState. The response looks like this: { coordinates: { lat: '', lng: ...

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...