javascript - Uncaught TypeError: Cannot read property 'length' of undefined , using react and redux-form validat

admin管理员组

文章数量:1327807

I am using redux-form and react here and trying to use validation. I have it all working but for some reason when I try to validate that a field must be a certain length property I get:

Uncaught TypeError: Cannot read property 'length' of undefined

Here is the code:

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

class PostsNew extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  renderField(field) {
    return (
      <div className="form-group">
        <label><strong>{field.label}:</strong></label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        {field.meta.touched ? field.meta.error : ''}
      </div>
    )
  }

  onSubmit(values) {
    console.log(values);
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <Field
          label="Title for Post"
          name="title"
          ponent={this.renderField}
        />
        <Field
          label="Categories"
          name="categories"
          ponent={this.renderField}
        />
        <Field
          label="Post Content"
          name="content"
          ponent={this.renderField}
        />
        <button type="submit" className="btn btn-success">Submit</button>
      </form>
    );
  }
}

function validate(values) {
  const errors = {};

  //Validate the inputs from values
  if(!values.title) {
    errors.title = "Enter a title!";
  }
  if(!values.categories) {
    errors.categories = "Enter some categories!";
  }

  if(!values.content) {
    errors.content = "Enter some content please!";
  }

  if(!values.content.length < 20) {
    errors.content = "Content must be longer than 3 characters!";
  }
  //If errors is empty, the form is fine to submit
  //If errors has any properties, redux form assumes form is invalid
  return errors;
}

export default reduxForm({
  validate,
  form: 'PostsNewForm'
})(PostsNew);

I am using redux-form and react here and trying to use validation. I have it all working but for some reason when I try to validate that a field must be a certain length property I get:

Uncaught TypeError: Cannot read property 'length' of undefined

Here is the code:

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

class PostsNew extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  renderField(field) {
    return (
      <div className="form-group">
        <label><strong>{field.label}:</strong></label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        {field.meta.touched ? field.meta.error : ''}
      </div>
    )
  }

  onSubmit(values) {
    console.log(values);
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <Field
          label="Title for Post"
          name="title"
          ponent={this.renderField}
        />
        <Field
          label="Categories"
          name="categories"
          ponent={this.renderField}
        />
        <Field
          label="Post Content"
          name="content"
          ponent={this.renderField}
        />
        <button type="submit" className="btn btn-success">Submit</button>
      </form>
    );
  }
}

function validate(values) {
  const errors = {};

  //Validate the inputs from values
  if(!values.title) {
    errors.title = "Enter a title!";
  }
  if(!values.categories) {
    errors.categories = "Enter some categories!";
  }

  if(!values.content) {
    errors.content = "Enter some content please!";
  }

  if(!values.content.length < 20) {
    errors.content = "Content must be longer than 3 characters!";
  }
  //If errors is empty, the form is fine to submit
  //If errors has any properties, redux form assumes form is invalid
  return errors;
}

export default reduxForm({
  validate,
  form: 'PostsNewForm'
})(PostsNew);

• javascript
• reactjs
• redux
• redux-form

Share Improve this question Follow asked May 31, 2017 at 20:08 user7366497user7366497

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

if(!values.content || !values.content.length < 20){ }

You might also try to check the object first before the property itself.

I am not sure if this is the correct way to do this, but it does work!

if(values.content){
    if(values.content.length < 20){
      errors.content = "Content must be longer than 20 characters!";
    }
  }

Best way i feel is to do inline validation so

<Field
  label="Post Content"
  name="content"
  ponent={this.renderField}
  validate={(value) => value && value.length > 20 ? undefined : 'Content must be longer than 20 characters!'}
/>

本文标签：