Topic: MDSelect validation
Is there a way of adding a validation message, and setting the html <input>
as invalid for a MDBSelect, with required
, after a form is submitted and nothing has been selected? Just like MDBInput works.
example:
import React, { Component } from 'react';
import {
MDBRow,
MDBCol,
MDBValidation,
MDBBtn,
MDBSelect,
MDBInput,
} from 'mdb-react-ui-kit';
export default class MyForm extends Component {
constructor (props) {
super(props)
this.state = {
force: this.props.force || '',
area: this.props.area || '',
name: this.props.name || '',
}
this.handleSubmit = this.handleSubmit.bind(this)
this.setSelectValue = this.setSelectValue.bind(this)
this.handleInputChange = this.handleInputChange.bind(this)
}
handleSubmit (event) {
fetch('/api/myform', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(this.state)
})
}
setSelectValue (field) {
return (value) => this.setState({[field]: value})
}
handleInputChange (event) {
this.setState({[event.target.name]: event.target.value});
}
render () {
return <MDBValidation noValidate onSubmit={this.handleSubmit}>
<MDBRow className='g-3'>
<MDBCol size='12'>
<MDBRow className='g-3'>
<MDBCol sm='6' md='4'>
<MDBSelect id='force' label='Force' required
data={[
{text: 'Maximum', value: 3},
{text: 'Medium', value: 2},
{text: 'Minimum', value: 1},
]}
invalid
validation='Please select one.'
getSelectedValue={this.setSelectValue('force')}
/>
</MDBCol>
<MDBCol sm='6' md='4'>
<MDBSelect id='area' label='Area' required
data={[
{text: 'Big', value: 3},
{text: 'Medium', value: 2},
{text: 'Small', value: 1},
]}
invalid
validation='Please select one.'
getSelectedValue={this.setSelectValue('area')}
/>
</MDBCol>
<MDBCol size='12' md='4'>
<MDBInput id='name' name='name' label='Name' required
type='text'
value={this.state.name}
invalid
validation='At least 3 characters.'
pattern='[A-Za-z0-9_]{3,}'
onChange={this.handleInputChange}
/>
</MDBCol>
</MDBRow>
</MDBCol>
<MDBCol size='12' className='text-center'>
<MDBBtn type='submit'>Confirm</MDBBtn>
</MDBCol>
</MDBRow>
</MDBValidation>
}
}
The MDBSelect fields inital state is empty with normal border, which is what a want, but when the submit button is pressed, I'd like to see them red with the validation
message bellow them. The MDBInput, from the example, has that exact behavior.
I tried to use the browser validity check on the MDBSelect inputs but with no sucess
handleSubmit (event) {
let inputs = event.target.getElementsByTagName("input")
for (let input of inputs) {
if (input.name !== undefined && input.name !== '') continue
input.setCustomValidity("")
console.log(`id: ${input.id}, type: ${input.type}, value: '${input.value}'.`)
console.log(input.validity)
if (input.value === undefined || input.value.length === 0) {
input.setCustomValidity("invalid")
}
}
let valid = event.target.checkValidity();
console.log('form validity', valid)
}
The form validity is true
when the MDBInput is valid, despite the MDBSelect being empty.
obs: my MDB React version is actually PRO Essential 1.0.0-beta7, but the forum's question form newest version MDB version is the beta6.
Krzysztof Wilk staff answered 4 years ago
Hi!
Due to the complicated structure of the MDBSelect component, we didn't implement this feature yet. We'll try to add it in the next release (28.06) :)
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 1.0.0-beta6
- Device: None
- Browser: chrome
- OS: linux
- Provided sample code: No
- Provided link: No