# Mastering React Course Form Validation Problem

**URL:** <https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218>\
**Category:** React\
**Created:** [September 16, 2022, 11:00am UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218 "2022-09-16T11:00:20Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![moshfan](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@moshfan](https://forum.codewithmosh.com/u/moshfan)\
**Post date:** [September 16, 2022, 11:00am UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/1 "2022-09-16T11:00:20Z")

</div>

Hello Everyone,

I am doing Mastering React Course. In the form section, I am facing problem. I cannot use Joi validation with validateProperty property. handleChange for Joi is not giving result properly.

Joi = 17.6.0 ,  
React = 18

```auto

import { Component } from "react";
import Joi from "joi";
import Input from "./common/input";

class LoginForm extends Component {
  state = {
    account: {
      username: "",
      password: "",
    },
    errors: {},
  };

  schema = Joi.object({
    username: Joi.string().required(),
    password: Joi.string().required(),
  });

  validateProperty = ({ name, value }) => {
    const obj = { [name]: value };
    const schema = { [name]: this.schema[name] };

    const { error } = this.schema.validate(obj, schema);
    return error ? error.details[0].message : null;
  };

  handleChange = ({ currentTarget: input }) => {
    const errors = { ...this.state.errors };
    const errorMessage = this.validateProperty(input);

    if (errorMessage) errors[input.name] = errorMessage;
    else delete errors[input.name];

    const account = { ...this.state.account };
    account[input.name] = input.value;

    this.setState({ account, errors });
  };

  validate = () => {
    const { username, password } = this.state.account;
    const options = { abortEarly: false };
    const { error } = this.schema.validate({ username, password }, options);

    if (!error) return null;

    const errors = {};
    for (let item of error.details) {
      errors[item.path[0]] = item.message;
    }
    return errors;
  };

  handleSubmit = (e) => {
    e.preventDefault();

    const errors = this.validate();
    this.setState({ errors: errors || {} });
    if (errors) return;

    console.log(this.state.account);

    // Call the server
  };

  render() {
    const { account, errors } = this.state;
    return (
      <>
        <form onSubmit={this.handleSubmit}>
          <Input
            name="username"
            label="Username"
            value={account.username}
            onChange={this.handleChange}
            error={errors.username}
          />
          <Input
            name="password"
            label="Password"
            value={account.password}
            onChange={this.handleChange}
            error={errors.password}
          />
          <button type="submit" className="btn btn-primary mt-3">
            Submit
          </button>
        </form>
      </>
    );
  }
}

export default LoginForm;

```

Please help me why my validateProperty not working.

---

<div class="post-metadata">

**Author:** ![moshfan](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@moshfan](https://forum.codewithmosh.com/u/moshfan)\
**Post date:** [September 16, 2022, 12:54pm UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/2 "2022-09-16T12:54:37Z")

</div>

@Mosh

---

<div class="post-metadata">

**Author:** ![moshfan](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@moshfan](https://forum.codewithmosh.com/u/moshfan)\
**Post date:** [September 17, 2022, 1:34am UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/3 "2022-09-17T01:34:41Z")

</div>

isn’t there anyone ??? ☹

---

<div class="post-metadata">

**Author:** ![UniqueNospaceShort](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/uniquenospaceshort/32/1814_2.png) [@UniqueNospaceShort](https://forum.codewithmosh.com/u/UniqueNospaceShort)\
**Post date:** [September 17, 2022, 10:56pm UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/4 "2022-09-17T22:56:13Z")

</div>

Hi,

Can you also provide the code for the input component ?

---

<div class="post-metadata">

**Author:** ![moshfan](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@moshfan](https://forum.codewithmosh.com/u/moshfan)\
**Post date:** [September 18, 2022, 9:54am UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/5 "2022-09-18T09:54:14Z")

</div>

@UniqueNospaceShort , yes.

```auto
const Input = ({ name, label, value, error, onChange }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        type="text"
        className="form-control"
        name={name}
        value={value}
        onChange={onChange}
      />
      {error && <div className="alert alert-danger">{error}</div>}
    </div>
  );
};

export default Input;

```

---

<div class="post-metadata">

**Author:** ![onlyhasbi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/onlyhasbi/32/4608_2.png) [@onlyhasbi](https://forum.codewithmosh.com/u/onlyhasbi)\
**Post date:** [September 18, 2022, 11:17am UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/6 "2022-09-18T11:17:14Z")

</div>

> [@moshfan](#):
>
> `const { error } = this.schema.validate(obj, schema);`

in joi version 17, you just passing your obj without schema

```auto
const {error} = this.schema.validate(obj)

```

---

<div class="post-metadata">

**Author:** ![moshfan](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@moshfan](https://forum.codewithmosh.com/u/moshfan)\
**Post date:** [September 18, 2022, 2:01pm UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/7 "2022-09-18T14:01:49Z")

</div>

@onlyhasbi , it is not working property. In the username input fields, “Password is required is coming…”. also in the password input fields, “Username cannot be empty is coming.”. In the mosh’s course joi is older version which is deprecated right now i have seen on github.

---

<div class="post-metadata">

**Author:** ![onlyhasbi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/onlyhasbi/32/4608_2.png) [@onlyhasbi](https://forum.codewithmosh.com/u/onlyhasbi)\
**Post date:** [September 18, 2022, 2:34pm UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/8 "2022-09-18T14:34:14Z")

</div>

1. your trying to set schema dinamically using this way

```auto
const schema = { [name]: this.schema[name] };

```

but in Joi v17 this approach won’t work. to do this, you need to use extract property from joi  
read → [joi.dev - 17.6.0 API Reference](https://joi.dev/api/?v=17.6.0#anyextractpath)

```auto
//change to this one
const rule = schema.extract(name);
const propertySchema = Joi.object({
      [name]: rule
    });

```

1. and also validate function in joi v17 only passing one parameter, different from what you see in the mosh tutorial  
read → [joi.dev - 17.6.0 API Reference](https://joi.dev/api/?v=17.6.0#anyvalidatevalue-options)

```auto
const { error } = this.schema.validate(obj, schema); //old version
const { error } = this.schema.validate(obj); //new version

```

check the documentation first when you try update packages to new version

---

<div class="post-metadata">

**Author:** ![onlyhasbi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/onlyhasbi/32/4608_2.png) [@onlyhasbi](https://forum.codewithmosh.com/u/onlyhasbi)\
**Post date:** [September 18, 2022, 2:38pm UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/9 "2022-09-18T14:38:44Z")

</div>

i have done this course but i converted all class component with functional component. if you need some refference. please visit [Cinemax - CodeSandbox](https://codesandbox.io/s/cinemax-q5euvi)

---

<div class="post-metadata">

**Author:** ![moshfan](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@moshfan](https://forum.codewithmosh.com/u/moshfan)\
**Post date:** [September 18, 2022, 3:19pm UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/10 "2022-09-18T15:19:56Z")

</div>

thank you… @onlyhasbi

---

<div class="post-metadata">

**Author:** ![onlyhasbi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/onlyhasbi/32/4608_2.png) [@onlyhasbi](https://forum.codewithmosh.com/u/onlyhasbi)\
**Post date:** [September 18, 2022, 3:48pm UTC](https://forum.codewithmosh.com/t/mastering-react-course-form-validation-problem/15218/11 "2022-09-18T15:48:00Z")

</div>

you’r welcome @moshfan