MDBSelect validation doesn't work


Topic: MDBSelect validation doesn't work

zkrapavickas asked 5 years ago

Expected behavior MDBSelect validation doesn't work

Actual behavior Should take into account "required" attribute.

Resources (screenshots, code snippets etc.) { alert("changed") }} required> Choose ticket type Billing Technical


                            <MDBSelect
                                label="Ticket type"
                                onChange={() => { alert("changed") }}
                                required>
                                <MDBSelectInput selected="Choose ticket type" />
                                <MDBSelectOptions>
                                    <MDBSelectOption disabled>Choose ticket type</MDBSelectOption>
                                    <MDBSelectOption value="1">Billing</MDBSelectOption>
                                    <MDBSelectOption value="2">Technical</MDBSelectOption>
                                </MDBSelectOptions>
                            </MDBSelect>

Konrad Stępień staff answered 5 years ago

Hi @zkrapavickas,

Can you test my code?

import React from 'react';
import { MDBSelect, MDBBtn, MDBCol } from 'mdbreact';

export default class FormPage extends React.Component {
  state = {
    requiredOptions: [
      {
        checked: false,
        disabled: false,
        text: 'Billing',
        value: '1'
      },
      {
        checked: false,
        disabled: false,
        text: 'Technical',
        value: '2'
      }
    ]
  };
  render() {
    return (
      <form onSubmit={e => e.preventDefault()}>
        <MDBSelect
          color='primary'
          getValue={(e)=> alert(e)}
          // getTextContent={(e)=> alert(e)}
          options={this.state.requiredOptions}
          label='Ticket type'
          selected="Choose ticket type"
          required
        />
        <MDBCol className='d-flex justify-content-center'>
          <MDBBtn type='submit' color={this.state.submitBtnColor}>
            Submit
          </MDBBtn>
        </MDBCol>
      </form>
    );
  }
}

Best regards, Konrad.


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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No