Как провести валидацию при вводе текста с использованием формы-редукса, которая принимает длину не более 8 символов? - PullRequest
Новая
       6

Как провести валидацию при вводе текста с использованием формы-редукса, которая принимает длину не более 8 символов?

0 голосов
/ 19 октября 2019

Ниже приведены два файла, которые являются inputForm.js и TextFiled.js. Здесь TextField.js является отдельным компонентом реакции, и я не хочу ничего менять на это.

Вот здесь inputForm.jsфайлы. Здесь я хочу проверить введенный символ и проверить, если длина больше 8, тогда под текстовым вводом должно быть какое-то сообщение об ошибке. 

 import TextField from "./TextField";
 const required = value => (value ? undefined : "Required");
const exactLength = length => value => {
  //alert(value)
  return value && value.length !== length ? `Must be ${length} exact 6` : undefined;

}
  const exact6 = exactLength(6);
  
 <h2>Field-Level Validation</h2>
  <TextField
    labelName="Cost"
    placeholder="Cost"
    name="cost"
    onValidate={[required, exact6]}

  />

TextField.js

import React from "react";
import { Field, reduxForm } from "redux-form";


const Input = props => {
  const {
    disabled,
    labelName,
    placeholder,
    onValidate,
    input: { name, onBlur, onChange, onFocus, value },
    meta: { error, touched, visited }
  } = props;

  const showError = (visited || touched || onValidate) && error;
  return (
    <div className={FormStyles.inputWrapper}>
      <label className={FormStyles.formLabel}>{labelName}</label>
      <input
        className="form-input"
        disabled={disabled}
        name={name}
        onBlur={onBlur}
        onChange={onChange}
        onFocus={onFocus}
        
        placeholder={placeholder}
        value={value}
      />
      {showError && <div className="note note-error">{error}</div>}
    </div>
  );
};

const TextField = props => <Field {...props} validate={props.onValidate} component={Input} />;

export default reduxForm({
  form: "fieldLevelValidation" // a unique identifier for this form
})(TextField);
...