Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FormFeedback's style is now working when an input validation is false.

See original GitHub issue

Issue description

components: FormFeedback
reactstrap version #4.8.0
react version #16.2.0
bootstrap version #4.0.0

What is happening?

I applied the <FormFeedback> component and added onChange method for an input to check the validity of the input. But I am getting this html output: <div class="form-control-feedback">Please use a valid URL.</div> The error color is not red, it is black.

What should be happening?

The error class should be applied the error feedback div. Just like this example: https://reactstrap.github.io/components/form/

Code

<Input 
	type="text" 
	name="domain" 
	id="domain"
	placeholder="https://www.test.com, etc." 
	value={this.state.domain} 
	onChange={this.handleDomainChange} 
	getRef={(input) => (this.domainRef = input)}
	required />
{
	this.state.isValidDomain == false &&
	<FormFeedback>Please use a valid URL.</FormFeedback>
}

Issue Analytics

State:
Created 6 years ago
Comments:18 (8 by maintainers)

Top GitHub Comments

2reactions

TheSharpieOnecommented, Nov 7, 2019

you can add d-block to the className. it will force it to be displayed.

0reactions

eerieecommented, Jul 16, 2019

How can i make FormFeedback visible if we don’t have any Input Field to set to invalid?

Top Results From Across the Web

React-Bootstrap Invalid Form Feedback is always visible how ...

I want to see that when the input pattern is not valid, the invalid feedback text is displayed once the form is validated....

Input validation errors: The root of all evil in web application ...

Input validation is the first step in sanitizing the type and content of data supplied by a user or application. Missing or improper...

Form - dbc docs - Dash Bootstrap Components - Faculty AI

Use Bootstrap's form components to control the layout and style of your input components. ... controls, optional help text, and form validation messaging....

reactstrap - Form

import React from 'react'; import { Button, Form, FormGroup, Label, Input, ... without validation</Label> <Input /> <FormFeedback>You will not be able to ...

Client-side form validation - Learn web development | MDN

Client-side form validation sometimes requires JavaScript if you want to ... Returns true if the element's value has no validity problems; false otherwise....