The necessary text field is being marked in red prior to form submission

While developing a web app using React/Bootstrap, I encountered a bug where the required textarea is highlighted in red as soon as the form is opened, before clicking submit.

You can view the issue in this Imgur album (first picture shows the form opened, second picture shows after clicking submit) - https://i.sstatic.net/hswvH.jpg

I attempted several solutions, with the only successful one being removing the required tag (which is not an ideal solution).

Here is the code snippet for the textarea:

  <textarea
    className="form-control"
    name="ticketNewDetailedInfo"
    rows="5"
    value={this.state.ticketNewDetailedInfo}
    onChange={this.handleInputChange}
    required 
  />

The textarea should only be highlighted in red if it is empty when the user submits the form, not upon opening the form.

javascripthtmlcssreactjsbootstrap-4

Answer №1

Eliminate the need for the required attribute on the textarea and take charge of form validation yourself. Upon submission of the form, ensure that all fields have been filled out. If a field is left empty, apply the class is-invalid to trigger a visual red indicator using Bootstrap for user feedback. A simple function to accomplish this could be: 

validateFormValues( values ) {
   var passed = true;
   for( let i = 0; i < values.length; i++ ) {
      if( values[i] === '' ) {
          passed = false;
      }
   }
   return passed;

}

Then, in your textarea, include the following code: 

className={ `form-control ${ !this.state.passed ? 'is-invalid' : ''}` }

Answer №2

this.handleInputChange is responsible for validating the required field. It gets triggered when the onchange event occurs, meaning it checks the required fields as soon as you click into the textarea.

To improve this setup, consider changing the trigger event to onsubmit instead.

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

Conceal/Reveal HTML Selection Choices by comparing values within JSON array

I am facing an issue with a <select? element that includes multiple <option> elements. There is a text input above it that sends data to a PHP script using Ajax and receives a JSON array based on a MySQL query. The database query results should ma ...

jqueryhtmljson

Creating a state in an asynchronous function within the context or provider of a React Native application

I am currently using Context Hooks to manage states in react native. My goal is to initialize the state by calling an async function that makes an API request and then return the initial state using useState. I attempted to set the initial state for "tou ...

reactjsreact-nativereact-hooksuse-stateuse-context

What is the secret behind the checkbox retaining its checked status upon page reload?

My dataTable is loading all data from the MySQL database and the first checkboxes are automatically incremented when a new row is added. However, users may check or uncheck these checkboxes. My goal is to retain the checkbox results even when the page is r ...

javascriptphpmysql

What steps need to be taken to utilize the fast-json package within a web browser environment?

In my quest to enhance the performance of my apps, I stumbled upon two intriguing packages. Currently, I am working on a forum-style app that constantly receives and processes information from APIs. Despite optimizing my frontend JavaScript to the best of ...

javascriptnode.jsnpmrequirejs

Tips for getting information from a GET/POST response message with superagent

I'm currently utilizing Node.js and Superagent for testing my server implementation. I have successfully sent a Superagent GET request and received a positive response with the code provided below. My goal is to extract and log only the "id" value fro ...

javascriptnode.jsjsonsuperagent

Setting a maximum height using flex property of 1 while also enabling overflow

Imagine a scenario where you have a <div with a height specified as a percentage of its parent's height, and this <div contains a contenteditable element as its child. The goal is to make the child fill all available vertical space and scroll wh ...

cssflexboxoverflow

Get image data from Next.JS API and show it in the web browser

I am looking to utilize my own next.js endpoints to request an image that I can then embed into my website. Currently, the issue I am facing is that the image seems to be immediately downloaded and does not display in the browser window. import type { Next ...

javascriptnode.jsrestnext.jsnext.js13

What is the best way to create horizontal scrolling similar to the metro design?

Looking to create a horizontal scrolling effect similar to Windows 8's Metro style where the scrollers move along with the mouse. I've attempted using the following code: $(document).ready(function() { document.documentElement.onmousewheel ...

javascriptjquery

What methods are most effective for modifying state within a loop?

How can I effectively update a state variable within a loop, considering that setState operates asynchronously and does not immediately reflect changes to the state? The task at hand involves validating multiple fields and accurately storing whether each ...

reactjsreact-hooks

Facing a challenge in configuring MongoDB automatic data expiration based on specific time zones

I am currently facing an issue with clearing data in MongoDB at the start of each day. For example, on July 15, 2020 at 00:00:00, data is deleted from the database based on a specific time. I am having trouble properly assigning the expiresAt attribute in ...

javascriptnode.jsmongodbdate

WordPress CSS & JS files failing to enqueue properly

My attempt to integrate my CSS and JS files with WordPress has not been successful. Although my CSS works through the Custom CSS tab, this is not an ideal solution. Below is the code from my functions.php file for your reference. Can you help me troublesho ...

javascriptcsswordpress

Updating the value of each preceding sibling of every checked checkbox using jQuery upon form submission

After extensive research, I discovered that the most effective approach involves using a clever workaround to capture every tick and untick on a dynamic input row with multiple checkbox arrays. However, none of the solutions provided a viable method. I th ...

javascripthtmljquerycheckbox

The onKeyUp function seems to be malfunctioning in React-Select

I am looking to capture the character whenever there is a change in the text from a multi-select dropdown menu. Unfortunately, the onKeyUp event is not triggering as expected. Here's the code snippet for your reference: const options = [ { label ...

reactjsreact-select

Retrieving checkbox value upon form submission

Imagine having a form containing several checkboxes. Upon submitting the form, you aim to display all values of the selected checkboxes. <form> <input type="checkbox" id="product1" name="product1" value="12"> <input type="checkbox" id="prod ...

javascripthtml

Adding a scrollable feature to a Bootstrap Modal seems to be generating additional unnecessary pages at the

I need help with my scrollable bootstrap modal that has a print button on top. When the user clicks the button, I want to print the modal content. Here is the code snippet: HTML : <div class="container-fluid" id="body-noPrint"> /* HTML BODY CON ...

javascriptjqueryhtmlcsstwitter-bootstrap

The alignment issue arises when the browser is resized

Something seems off with my images. They appear correctly when I first open the browser, but if I resize it, they go all wonky. Refreshing the page fixes it, but if I open a larger browser window and then make it smaller, it messes up again. It's puzz ...

htmlcssimageresponsive-designresize

What is the reason for the lack of arguments being passed to this Express middleware function?

I have been developing a middleware that requires the use of `bodyParser` to function, however I do not want to directly incorporate it as a dependency in my application. Instead, I aim to create a package that includes this requirement and exports a middl ...

javascriptnode.jsexpressmiddleware

Encountering a 500 error in Angular while utilizing forkJoin for calling API services

In my Angular 7 project, I have implemented a call in the ngOnInit method to two different API routes to fetch some data using forkJoin. Here is how I have set it up: ngOnInit() { debugger this.route.params.pipe( switchMap(params => for ...

javascriptangularapipipefork-join

Why is $scope.$watch('$destroy') being called in Angular UI Router 1.0 even when not leaving the state?

Take a look at the plunker here. My understanding is that $scope.$watch('$destroy') should be invoked when $scope is on the verge of being destroyed. In the provided example, it seems that upon entering a state, the $scope.$watch('$destroy ...

javascriptangularjsangular-ui-router

Using Express Framework with NodeJS - accessing a JavaScript script with a relative path

After using the Express generator to create a Node application, my directory structure ended up looking like this: . ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascri ...

javascriptjquerynode.jsexpress