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

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

To implement a "name" and "mobile" field that is required in both React JS and Laravel 11.1, you will need to create an API endpoint in Laravel to handle the validation and data submission, and then use Axios or Fetch in React JS to make requests to that endpoint. Here's a step-by-step guide to achieving this:

1. Laravel Setup:

First, create a new Laravel project if you haven't already:

composer create laravel/laravel project-name --prefer-dist

Next, create a new validation rule for the "mobile" field. In your app/Providers/AppServiceProvider.php file, add the following code inside the boot() method:

use Illuminate\Support\Facades\Validator;

Validator::resolver(function ($translator, $rule, $value, $arguments, $messages) {
    return new class extends Validator {
        public function passes($attribute, $value)
        {
            return preg_match('/^[\+]?[(]?[0-9]{10,12}[)]?$/', $value);
        }

        public function message()
        {
            return 'The :attribute must be a valid phone number.';
        }
    };
});

Now, create a new route and controller for handling the data submission:

php artisan make:controller ApiController --api
php artisan make:request ApiStoreRequest --api

Edit the routes/api.php file to add the following route:

Route::post('/store', 'ApiController@store');

Edit the app/Http/Controllers/ApiController.php file to add the following code:

use App\Http\Requests\ApiStoreRequest;
use Illuminate\Http\Response;

public function store(ApiStoreRequest $request)
{
    $validated = $request->validated();

    // Your logic for storing the data goes here

    return response()->json(['message' => 'Data saved successfully'], Response::HTTP_OK);
}

Edit the app/Http/Requests/ApiStoreRequest.php file to add the following code:

use Illuminate\Foundation\Http\FormRequest;

class ApiStoreRequest extends FormRequest
{
    public function rules()
    {
        return [
            'name' => 'required|string|max:255',
            'mobile' => 'required|numeric|digits:10,12|unique:your_table_name,mobile',
        ];
    }
}

Replace your_table_name with the name of the table where you want to store the data.

2. React JS Setup:

First, install Axios for making HTTP requests:

npm install axios

Create a new component called Form.js:

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

const Form = () => {
    const [name, setName] = useState('');
    const [mobile, setMobile] = useState('');

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

        try {
            const response = await axios.post('/api/store', { name, mobile });
            console.log(response.data.message);
        } catch (error) {
            console.error(error.response.data.errors);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="name">Name:</label>
            <input
                type="text"
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />

            <label htmlFor="mobile">Mobile:</label>
            <input
                type="tel"
                id="mobile"
                value={mobile}
                onChange={(e) => setMobile(e.target.value)}
            />

            <button type="submit">Submit</button>
        </form>
    );
};

export default Form;

Now, you can use the Form component in your React app. Make sure to replace /api/store with the correct API endpoint.

That's it! Now you have a React JS component that sends data to a Laravel API endpoint for validation and data storage, with both the "name" and "mobile" fields being required.