A Simple Create Post Form with Validation

Written by SarahS

15th November 2019

A simple form with basic validation.

ArticlesController.php

public function store()
    {
        //validation
        request()->validate([
            'title' => 'required',
            'body' => 'required'
        ]);

        // persist the resource
        $article = new Article();
        $article->title = request('title');
        $article->body = request('body');

        $article->save();

        return redirect('/articles');
    }

create.blade.php

 

          <form action="/articles" method="POST">
                @csrf
                <div class="field">
                    <label class="label" for="title">Title</label>

                    <div class="control">
                        <input 
                            class="form-control @error('title') is-invalid @enderror" 
                            type="text" 
                            name="title" 
                            id="title"
                            value="{{ old('title')}}">

                        @error('title')
                        <p class="invalid-feedback">{{$errors->first('title')}}</p>
                        @enderror
                    </div>
                </div>
                <div class="field">
                    <label class="label" for="body">Body</label>

                    <div class="control">
                        <textarea 
                            class="form-control @error('body') is-invalid @enderror" 
                            name="body" 
                            id="body"
                            value="{{ old('body')}}"></textarea>
                        @error('body')
                        <p class="invalid-feedback">{{$errors->first('body')}}</p>
                        @enderror
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                    <button type="submit" class="btn btn-primary mt-2 mb-2">Submit</button>
                    </div>
                </div>               
            </form>

This simple form shows the browser validation that can be done with Laravel and Bootstrap.

Protection

Line 2 uses the Laravel @csrf Blade directive to prevent against cross-site request forgery (CSRF) attacks. This line includes a hidden CSRF token field in the form so that the CSRF protection middleware can validate the request. All your forms should have this directive.

Input highlighter

When an error shows on your form you can highlight the relevant input fields by using the @error directive. These are shown on lines 8 and 24.

[php]class="form-control @error('title') is-invalid @enderror" [/php]

This shows the tertiary operator for the @error Blade directive. This holds any error messages and by checking this you can add the is-invalid Bootstrap CSS value to the input class. If there are no error messages this class will not show.

Hold previous inputted data

If there is an error you can still hold the previously inputted form data on post back using the

[php]value="{{ old('title')}}"[/php]

code as seen on line 12.

Show error messages

Exact error messages can also be provided to the user with the code shown on lines 14-16 and 28-30:

[php]
@error('body')
    <p class="invalid-feedback">{{$errors->first('body')}}</p>
@enderror
[/php]

This uses the Blade if statements and in between a paragraph is shown using the Bootstrap invalid-feedback class which highlights the text in red. The exact error is then shown again from the $errors variable.

This is one of my Laravel posts.  I’m still learning Laravel so the posts are usually pretty basic and are more aimed at keeping track of things that I find useful so that I can come back to them again at a later date.  I hope you find them useful too.  If not, or if you think they are wrong then please leave a comment below.  Thank you.

Faster Laravel Hosting

If this post helped you or if you have any questions please leave me a comment below:

0 Comments

You May Also Like…

Setting up SQLite for Laravel

Setting up SQLite for Laravel

Sometimes you may decide you want to use SQLite for your Laravel app instead of a full blown MySQL database. In that...