MDSelect validation


Topic: MDSelect validation

anlix pro premium asked 11 months ago

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 11 months 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!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • 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