422 name and mobile field required React js And Laravel 11.

422 name and mobile field required React js And Laravel 11.

To implement a "Name and Mobile" validation rule in a ReactJS frontend and Laravel backend, follow these steps:

1. Set up your Laravel project:

   • Install Laravel using Composer.
   • Set up your database connection.
   • Create a new model, controller, and migration file for handling user data.

2. Create a User model:

   • Run the command php artisan make:model User.
   • Open the User.php file and add the following validation rules in the $fillable array:

protected $fillable = [
    'name', 'mobile'
];

3. Create a UserController:
   • Run the command php artisan make:controller UserController.
   • Open the UserController.php file and add the following validation rules in the store method:

public function store(Request $request)
{
    $request->validate([
        'name' => 'required|string|max:255',
        'mobile' => 'required|numeric|digits:10',
    ]);

    // Your code to store the user data here.
}

4. Create a User migration file:
   • Run the command php artisan make:migration create_users_table --create=users.
   • Open the newly created migration file and add the following code:

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('mobile')->unique();
        $table->timestamps();
    });
}

5. Run the migration:

   • Run the command php artisan migrate.

6. Set up your ReactJS project:

   • Create a new ReactJS project using Create React App.
   • Install Axios for making HTTP requests.

7. Create a form component in ReactJS:

   • Create a new component called UserForm.js.
   • Add the following code to handle form submission:

import React, { Component } from 'react';
import axios from 'axios';

class UserForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      mobile: '',
      errors: {}
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit(event) {
    event.preventDefault();

    axios.post('/api/users', this.state)
      .then(response => {
        console.log(response);
        this.setState({ name: '', mobile: '' });
      })
      .catch(error => {
        this.setState({ errors: error.response.data.errors });
      });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
          {this.state.errors.name && <p>{this.state.errors.name[0]}</p>}
        </label>
        <label>
          Mobile:
          <input type="number" name="mobile" value={this.state.mobile} onChange={this.handleChange} />
          {this.state.errors.mobile && <p>{this.state.errors.mobile[0]}</p>}
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UserForm;

8. Set up your Laravel API route:
   • Open the routes/api.php file and add the following code:

Route::post('/users', 'UserController@store');

Now, when you submit the form in ReactJS, it will validate the "Name" and "Mobile" fields using Laravel's validation rules and display any errors in the ReactJS component.