how to submit from in laravel 10 with validation

In Laravel 10, form submission with validation is made easy with the use of Laravel’s built-in validation system. In this article, we will go through the step-by-step process of creating a form in Laravel 10 and validating its input.

Step 1: Create a Route

First, we need to create a route that will handle the form submission. Open your routes/web.php file and add the following route:

Route::post('/submit-form', [FormController::class, 'submitForm'])->name('submit.form');

This route will be triggered when the form is submitted and will call the submitForm method of the FormController class.

Step 2: Create a Controller

Next, we need to create a controller to handle the form submission. Run the following command in your terminal to create a new controller:

php artisan make:controller FormController

This will create a new controller file named FormController.php in the app/Http/Controllers directory. Open the file and add the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    public function submitForm(Request $request)
    {
        // Handle form submission
    }
}

Step 3: Create a View

Now, we need to create a view that will display the form to the user. Create a new file in the resources/views directory and name it form.blade.php. Add the following code to the file:

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('submit.form') }}" method="POST">
    @csrf
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="form-control" value="{{ old('name') }}">
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}">
    </div>

    <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message" class="form-control">{{ old('message') }}</textarea>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

This view includes a form with three fields (name, email, and message), and a submit button. It also includes a section that will display any validation errors that occur.

Step 4: Handle Form Submission and Validation

Now that we have the route, controller, and view set up, we need to handle the form submission and validation. Modify the submitForm method in the FormController class as follows:

public function submitForm(Request $request)
{
    $validatedData = $request->validate([
        'name' => 'required',
        'email' => 'required|email',
        'message' => 'required',
    ]);

    // Code to handle form submission
}

This code uses Laravel’s validate method to validate the input from the form. If any of the fields fail validation, the user will be redirected back to the form view, and the validation errors will be displayed. If all of the fields pass validation, the code to handle the form submission can be added.

For example, to store the form data in a database, you can add the following code to the submitForm method:

use App\Models\FormData;

public function submitForm(Request $request)
{
    $validatedData = $request->validate([
        'name' => 'required',
        'email' => 'required|email',
        'message' => 'required',
    ]);

    $formData = new FormData();
    $formData->name = $validatedData['name'];
    $formData->email = $validatedData['email'];
    $formData->message = $validatedData['message'];
    $formData->save();

    return redirect()->back()->with('success', 'Form submitted successfully!');
}

This code creates a new FormData object and sets its properties to the validated data from the form. It then saves the object to the database and redirects the user back to the form view with a success message.

Step 5: Display Validation Errors in the View

To display the validation errors in the view, modify the form.blade.php file as follows:

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

<form action="{{ route('submit.form') }}" method="POST">
    @csrf
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="form-control" value="{{ old('name') }}">
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}">
    </div>

    <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message" class="form-control">{{ old('message') }}</textarea>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

This code adds a check for the success session variable and displays a success message if it exists. It also modifies the error display section to display a list of all validation errors if there are any.

Conclusion

In this article, we’ve gone through the process of creating a form in Laravel 10 and validating its input using Laravel’s built-in validation system. By following these steps, you should now be able to create forms in Laravel 10 that validate user input and handle form submission with ease.