zlodiak @zlodiak

Как валидировать поле типа select?

Я создал форму при помощи react-forms и пытаюсь валидировать её поля. С полями типа input и textarea проблем нет, но не получается валидировать поле типа select. Помогите пожалуйста сделать это.

Конкретно проблема в том, что если пользователь заполняет все поля кроме select, то форма всё равно отправляется, что видно по отработавшей функции onSubmit.

Вот правила валидации:

export const required = value => value ? undefined : 'Required';

export const maxLength = max => value =>
  value && value.length > max ? `Must be ${max} characters or less` : undefined;

export const maxLength15 = maxLength(15);

Вот код компонента:

import React from 'react';
import { Field, reduxForm, reset } from 'redux-form';
import store from '../../redux/store';
import { required, maxLength15 } from '../../Validation/index';

const renderField = typeEl => ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <label>{label} -- {typeEl}</label>
    <div>
      { typeEl === 'textarea' && <textarea {...input} placeholder={label} type={type}></textarea> }
      { typeEl === 'input' && <input {...input} placeholder={label} type={type}/> }
      { typeEl === 'select' && <select {...input}><option></option><option value="Male">Male</option><option value="Female">Female</option></select> }
      
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)

function MessageForm(props) {
  const { handleSubmit, reset, submitting } = props;
  return (
    <form onSubmit={ handleSubmit }>
      <Field 
        name="name" 
        component={ renderField('input') } 
        type="text" 
        label="name"
        validate={[ required, maxLength15 ]}
      />
      <br/>
      <Field 
        name="subject" 
        component={ renderField('input') } 
        type="text" 
        label="subject"
        validate={[ required, maxLength15 ]}
      />
      <br/>
      <Field 
        name="gender" 
        component={ renderField('select') } 
        label="gender"
      />
      <br/>
      <Field 
        name="text" 
        component={ renderField('textarea') } 
        placeholder="text" 
        validate={[ required ]}
      />
      <br/>
      <button type="submit" disabled={ submitting }>Submit</button>
    </form>
  );
}

const MessageReduxForm = reduxForm({
  form: 'message',
})(MessageForm)

function MessageReduxFormWrap() {
  function onSubmit(formData) {
    store.dispatch(reset('message')); 
    console.log('submitted', formData);
  }

  return <MessageReduxForm onSubmit={ onSubmit }/>
}

export default MessageReduxFormWrap;