Is there a method to show an error message in red until a choice is selected?
Is there a method to show an error message in red until a choice is selected?
To establish a mandatory Select field using Material UI, follow these steps:
class RequiredSelect extends React.PureComponent {
state = {
selected: null,
hasError: false
}
handleChange(value) {
this.setState({ selected: value });
}
handleClick() {
this.setState(state => ({ hasError: !state.selected }));
}
render() {
const { classes } = this.props;
const { selected, hasError } = this.state;
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl} error={hasError}>
<InputLabel htmlFor="name">
Name
</InputLabel>
<Select
name="name"
value={selected}
onChange={event => this.handleChange(event.target.value)}
input={<Input id="name" />}
>
<MenuItem value="hai">Hai</MenuItem>
<MenuItem value="olivier">Olivier</MenuItem>
<MenuItem value="kevin">Kevin</MenuItem>
</Select>
{hasError && <FormHelperText>This is required!</FormHelperText>}
</FormControl>
<button type="button" onClick={() => this.handleClick()}>
Submit
</button>
</form>
);
}
}
Material UI provides alternative Select(native) options that allow you to simply utilize the standard HTML required attribute to designate an element as mandatory.
<FormControl className={classes.formControl} required>
<InputLabel htmlFor="name">Name</InputLabel>
<Select
native
required
value={this.state.name}
onChange={this.handleChange}
inputProps={{
name: 'name',
id: 'name'
}}
>
<option value="" />
<option value={"lala"}>lala</option>
<option value={"lolo"}>lolo</option>
</Select>
</FormControl>
Check out more at https://material-ui.com/demos/selects/#native-select
To ensure the required prop functions correctly, it is necessary to enclose your elements within a <form> tag and utilize the submit event for form submission.
In MUI v5 (2022), the implementation is as follows:
const handleSubmit = (e)=>{
e.preventDefault()
// ...
}
return (
<form onSubmit={handleSubmit}>
<Select required value={val} onChange={handleChange} required>
<MenuItem value="yes">Yes</MenuItem>
<MenuItem value="no">No</MenuItem>
</Select>
<Button type="submit">Submit</Button>
</form>
)
Essentially, the functionality aligns with expectations, suggesting that your code should resemble this example.
However, note that the required prop solely operates when enclosed within a <form> element and employs the submit event for submission.
If utilizing <FormControl>, remember to specify the required prop for both elements:
<FormControl required>
<Select required>
// ...
</FormControl>
Within my React application, there is a Table with a tbody section structured as follows: <tbody> { this.state.datasets.map((datasetName, idx) => { return (<tr> ...
It's been a challenge for me as a newcomer to React Native trying to retrieve data from a Firebase database. This is the process flow of how my data is handled: 1. A user selects locations and trip details (name, startDate, endDate) --> stored in ...
When communicating with the Node server, I am able to receive a response message in the controller. However, there seems to be an issue with assigning it properly. .controller('someCtrl', function(exportExcel){ $scope.clickEvent = function() ...
I'm trying to use Axios for API communication and I keep encountering this error. Despite researching online and attempting various solutions, I am still unable to resolve the problem. Can someone please assist me? All I want is to be able to click on ...
I've been working on creating a draggable div with the ability to bind its location for further use. I'm aiming to have multiple draggable elements on the page. Currently, I've implemented a 'dragable' attribute directive that allo ...
I am currently working on a map project that involves adding shapes and locations onto the map and saving it. However, I am encountering an issue with groundoverlay rotation. Even though there is no built-in rotation property in the Google Maps documenta ...
I am currently implementing the jquery.ime editor in my project, which allows for multi-language editing capabilities. The library I am using can be found here. By default, the language JSON files are loaded on "change" events. However, I would like this f ...
Hey there! I'm currently experimenting with creating a wave effect using CSS, specifically utilizing 'before' and 'after'. However, I've encountered an issue where I can't seem to position my waves correctly at the top a ...
I have acquired a Collada model of terrain and now wish to incorporate other models onto this terrain. To achieve this, I believe I need to retrieve the height coordinate (y) of the terrain based on specific x and z coordinates. Can someone please guide ...
When testing a Seo component that utilizes the next/head component, I encountered an issue where mocking next/head did not seem to have any effect. Is there something I am missing in my approach? import TestRenderer from 'react-test-renderer' ...
Looking for a solution using the element+element-Selector to modify CSS for an element following a button. This code snippet functions in Chrome, Edge, and Firefox but not Safari on MacOS: .button:focus+.change{ color: red; } <p>When you focus ...
Is there a way to change the order of items on the same level in sequelize-hierarchy for creating a menu? I've noticed that currently, the items are ordered by their sequence of insertion. But what if I want to manually set the order? Here is an exam ...
I am working with 2 services and need to update a variable in the first service from the second service. Within a controller, I am assigning a scope variable to the getter of the first service. The issue I am facing is that the view connected to the cont ...
I'm diving into the world of React and Material UI and currently exploring how to create a permissions dialog, similar to the ones we often see on mobile apps requesting privacy or location permissions, or like the pop-up in Chrome on desktop. My goal ...
I am currently working on a modal that is toggled using JavaScript. Within the modal, I am dynamically adding an image using JavaScript. Additionally, there will be a div element overlaying the image to simulate cropping (extract coordinates from the imag ...
As a recent Computer Science graduate, I am currently employed at a startup where I have been assigned the task of integrating new features into purchased software. The software was obtained from AWS and my initial attempts to work on it have been challeng ...
I have been attempting to move an element to the left using the transform property. However, there is already a pre-existing style with transform, which appears as: transform: translate3d(tx, ty, tz) What I am aiming for is to incorporate another property ...
Recently, I attempted to integrate Redux into my React application. I created a container called SignIn that instantiates a mapDispatchToProps and connects it to the component. The SignIn component renders a sub-component called SignInForm (code provided ...
In the React Material-UI framework, I am working with a CardContent component that looks like this: <CardContent className={classes.cardContent}> <Typography component="p" className={classes.title} variant="title"> {this.props.post.title ...
Within my JSP file, I have various tags that look like this: <style type="text/css"> #mask { display: none; cursor: wait; z-index: 99999; position: absolute; top: 0; left: 0; height: 100%; ...