How to validate react-select dropdown in React

by Clue Mediator · February 9, 2022

You may need to validate the react-select dropdown when you are dealing with a react-select dropdown in React. Just as we have created a common component for the input field in the previous article, here we will create a component for the dropdown in React.

Checkout more articles on ReactJS

Demo Application

Output - How to validate react-select dropdown in React - Clue Mediator — Output – How to validate react-select dropdown in React – Clue Mediator

Steps to validate react-select dropdown in React

Create a common Select component
Create a form using the Select component
Output

1. Create a common Select component

Let’s create a reusable dropdown component using react-select where we will pass all required fields.

Same as the Input field, we have to go through a few more props to handle the validation such as isReq, errorMsg, onValidateFunc.

Select.js

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import ReactSelect from "react-select";

const changeHandler = (e, props) => {
  let value = null;
  if (e) value = e.value;
  props.onChangeFunc(value, props.name, e);

  if (!props.onValidateFunc) return;

  let msg = null;
  if (!value && props.isReq) {
    msg = `Please select ${props.title}.`;
  }

  props.onValidateFunc(msg, props.name);
}

const Select = props => {

  const inputProps = {
    name: props.name,
    placeholder: props.placeholder || `Select ${props.title}`,
    className: props.className,
    isClearable: props.isClearable,
    value: props.options.find(x => x.value === props.value),
    options: props.options
  }

  return (
    <div className={props.outerClassName}>
      <label className="form-label">{props.title}</label>
      <ReactSelect
        {...inputProps}
        onChange={e => changeHandler(e, props)}
      />
      {props.errorMsg && <span className="text-danger">{props.errorMsg === true ? `Please select ${props.title}.` : props.errorMsg}</span>}
    </div>
  )
}

Select.defaultProps = {
  name: '',
  title: '',
  placeholder: '',
  className: '',
  outerClassName: 'mb-2',
  isClearable: true,
  value: '',
  options: [],
  onChangeFunc: () => { },
  isReq: null,
  onValidateFunc: () => { }
}

Select.propTypes = {
  name: PropTypes.string,
  title: PropTypes.string,
  placeholder: PropTypes.string,
  className: PropTypes.string,
  outerClassName: PropTypes.string,
  isClearable: PropTypes.bool,
  value: PropTypes.any,
  options: PropTypes.array,
  onChangeFunc: PropTypes.func,
  isReq: PropTypes.bool,
  errorMsg: PropTypes.any,
  onValidateFunc: PropTypes.func
}

export default memo(Select);

import React, { memo } from 'react';

import PropTypes from 'prop-types';

import ReactSelect from "react-select";

const changeHandler = (e, props) => {

let value = null;

if (e) value = e.value;

props.onChangeFunc(value, props.name, e);

if (!props.onValidateFunc) return;

let msg = null;

if (!value && props.isReq) {

msg = `Please select ${props.title}.`;

}

props.onValidateFunc(msg, props.name);

}

const Select = props => {

const inputProps = {

placeholder: props.placeholder || `Select ${props.title}`,

className: props.className,

isClearable: props.isClearable,

value: props.options.find(x => x.value === props.value),

options: props.options

}

return (

<label className="form-label">{props.title}</label>

<ReactSelect

{...inputProps}

onChange={e => changeHandler(e, props)}

{props.errorMsg && <span className="text-danger">{props.errorMsg === true ? `Please select ${props.title}.` : props.errorMsg}</span>}

</div>

)

}

Select.defaultProps = {

title: '',

placeholder: '',

className: '',

outerClassName: 'mb-2',

isClearable: true,

value: '',

options: [],

onChangeFunc: () => { },

isReq: null,

onValidateFunc: () => { }

}

Select.propTypes = {

title: PropTypes.string,

placeholder: PropTypes.string,

className: PropTypes.string,

outerClassName: PropTypes.string,

isClearable: PropTypes.bool,

value: PropTypes.any,

options: PropTypes.array,

onChangeFunc: PropTypes.func,

isReq: PropTypes.bool,

errorMsg: PropTypes.any,

onValidateFunc: PropTypes.func

}

export default memo(Select);

2. Create a form using the Select component

Now it’s time to use the Select component in the main component. First of all, we have to define two different state variables called form and error.

In the error state, we have defined the object for each property. The error object contains the following attributes.

isReq – For require validation
errorMsg – To render the error message on the screen
onValidateFunc – Function to handle the validation

const [form, setForm] = useState({
  country: null,
  lang: null
});

const onValidate = (value, name) => {
  setError(prev => ({
    ...prev,
    [name]: { ...prev[name], errorMsg: value }
  }));
}

const [error, setError] = useState({
  country: {
    isReq: true,
    errorMsg: '',
    onValidateFunc: onValidate
  },
  lang: {
    isReq: true,
    errorMsg: '',
    onValidateFunc: onValidate
  }
});

const onHandleChange = useCallback((value, name) => {
  setForm(prev => ({
    ...prev,
    [name]: value
  }));
}, []);

const [form, setForm] = useState({

country: null,

lang: null

});

const onValidate = (value, name) => {

setError(prev => ({

...prev,

[name]: { ...prev[name], errorMsg: value }

}));

}

const [error, setError] = useState({

country: {

isReq: true,

errorMsg: '',

onValidateFunc: onValidate

lang: {

isReq: true,

errorMsg: '',

onValidateFunc: onValidate

}

});

const onHandleChange = useCallback((value, name) => {

setForm(prev => ({

...prev,

[name]: value

}));

}, []);

Use the following HTML to render the form in React component.

<div className="app">
  <div className='mb-3'><strong>Validate react-select dropdown in React - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></strong></div>
  <div className='form'>
    <Select
      name="country"
      title="Country"
      value={form.country}
      options={countryList}
      onChangeFunc={onHandleChange}
      {...error.country}
    />
    <Select
      name="lang"
      title="Language"
      value={form.lang}
      options={languageList}
      onChangeFunc={onHandleChange}
      {...error.lang}
    />
    <button
      className='btn btn-primary btn-sm mt-2'
      onClick={handleSubmit}>
      Submit
    </button>
  </div>
</div>

<div className='mb-3'><strong>Validate react-select dropdown in React - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></strong></div>

<Select

name="country"

title="Country"

value={form.country}

options={countryList}

onChangeFunc={onHandleChange}

{...error.country}

<Select

name="lang"

title="Language"

value={form.lang}

options={languageList}

onChangeFunc={onHandleChange}

{...error.lang}

<button

className='btn btn-primary btn-sm mt-2'

onClick={handleSubmit}>

Submit

</button>

</div>

Let’s combine all code together and see how it looks.

App.js

import React, { useState, useCallback } from 'react';
import Select from './Select';

const countryList = [
  { value: "india", label: "India" },
  { value: "us", label: "US" },
  { value: "australia", label: "Australia" }
];
const languageList = [
  { value: "english", label: "English" },
  { value: "hindi", label: "Hindi" },
  { value: "spanish", label: "Spanish" },
  { value: "arabic", label: "Arabic" }
];

function App() {

  const [form, setForm] = useState({
    country: null,
    lang: null
  });

  const onValidate = (value, name) => {
    setError(prev => ({
      ...prev,
      [name]: { ...prev[name], errorMsg: value }
    }));
  }

  const [error, setError] = useState({
    country: {
      isReq: true,
      errorMsg: '',
      onValidateFunc: onValidate
    },
    lang: {
      isReq: true,
      errorMsg: '',
      onValidateFunc: onValidate
    }
  });

  const onHandleChange = useCallback((value, name) => {
    setForm(prev => ({
      ...prev,
      [name]: value
    }));
  }, []);

  const validateForm = () => {
    let isInvalid = false;
    Object.keys(error).forEach(x => {
      const errObj = error[x];
      if (errObj.errorMsg) {
        isInvalid = true;
      } else if (errObj.isReq && !form[x]) {
        isInvalid = true;
        onValidate(true, x);
      }
    });
    return !isInvalid;
  }

  const handleSubmit = () => {
    const isValid = validateForm();
    if (!isValid) {
      console.error('Invalid Form!');
      return false;
    }

    console.log('Data:', form);
  }

  return (
    <div className="app">
      <div className='mb-3'><strong>Validate react-select dropdown in React - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></strong></div>
      <div className='form'>
        <Select
          name="country"
          title="Country"
          value={form.country}
          options={countryList}
          onChangeFunc={onHandleChange}
          {...error.country}
        />
        <Select
          name="lang"
          title="Language"
          value={form.lang}
          options={languageList}
          onChangeFunc={onHandleChange}
          {...error.lang}
        />
        <button
          className='btn btn-primary btn-sm mt-2'
          onClick={handleSubmit}>
          Submit
        </button>
      </div>
    </div>
  );
}

export default App;

100

101

102

103

104

import React, { useState, useCallback } from 'react';

import Select from './Select';

const countryList = [

{ value: "india", label: "India" },

{ value: "us", label: "US" },

{ value: "australia", label: "Australia" }

];

const languageList = [

{ value: "english", label: "English" },

{ value: "hindi", label: "Hindi" },

{ value: "spanish", label: "Spanish" },

{ value: "arabic", label: "Arabic" }

];

function App() {

const [form, setForm] = useState({

country: null,

lang: null

});

const onValidate = (value, name) => {

setError(prev => ({

...prev,

[name]: { ...prev[name], errorMsg: value }

}));

}

const [error, setError] = useState({

country: {

isReq: true,

errorMsg: '',

onValidateFunc: onValidate

lang: {

isReq: true,

errorMsg: '',

onValidateFunc: onValidate

}

});

const onHandleChange = useCallback((value, name) => {

setForm(prev => ({

...prev,

[name]: value

}));

}, []);

const validateForm = () => {

let isInvalid = false;

Object.keys(error).forEach(x => {

const errObj = error[x];

if (errObj.errorMsg) {

isInvalid = true;

} else if (errObj.isReq && !form[x]) {

isInvalid = true;

onValidate(true, x);

}

});

return !isInvalid;

}

const handleSubmit = () => {

const isValid = validateForm();

if (!isValid) {

console.error('Invalid Form!');

return false;

}

console.log('Data:', form);

}

return (

<div className='mb-3'><strong>Validate react-select dropdown in React - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></strong></div>

<Select

name="country"

title="Country"

value={form.country}

options={countryList}

onChangeFunc={onHandleChange}

{...error.country}

<Select

name="lang"

title="Language"

value={form.lang}

options={languageList}

onChangeFunc={onHandleChange}

{...error.lang}

<button

className='btn btn-primary btn-sm mt-2'

onClick={handleSubmit}>

Submit

</button>

</div>

);

}

export default App;

3. Output

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

online prescriptions says:
October 30, 2023 at 8:44 am
Wow, wonderful weblog layout! How long have you ever been running a blog for? you made blogging look easy. The overall glance of your web site is fantastic, as well as the content!
- Clue Mediator says:
  November 27, 2023 at 6:22 am
  Thank you so much for your kind words! I’m thrilled that you appreciate the weblog layout and find the content engaging. Stay tuned for more exciting content! 😊✨

You may also like...

2 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

How to validate react-select dropdown in React

Demo Application

Steps to validate react-select dropdown in React

1. Create a common Select component

2. Create a form using the Select component

3. Output

Demo & Source Code

You may also like...

How to add a DateTime picker in React

Pass command line arguments to npm scripts in package.json

How to disable an option in react-select

Object doesn’t support property or method ‘includes’ in IE

How to get selected by only value in react-select

How to add DateTimePicker in ReactJS

2 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us