We will discuss the form validation of the JQuery form in Laravel 6. when the user submits the form at that moment we have to need some field as mandatory for the validation of the input field. 


There are two types of validation, the first is server-side and the second is client-side. see the following JQuery validation example (client-side).


You can follow the below step.


Step 1: Install Laravel

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

Step 2: Setting Database Configuration

After the complete installation of Laravel. We have to database configuration. We will now open the .env file and change the data name, username, password in the .env file. See the changes below in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name(larave6_form_validation)
DB_USERNAME=Enter_Your_Database_Username(root)
DB_PASSWORD=Enter_Your_Database_Password(root)


Step 3: Create Table using migration

Now, We need to create a migration. so we will below command using create the students table migration.

php artisan make:migration create_students_table --create=students

database/migrations/create_students_table file.

<?php

use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;

class CreateStudentsTable extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up() {
        Schema::create('students', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('first_name');
            $table->string('last_name');
            $table->string('email');
            $table->string('mobile');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down() {
        Schema::dropIfExists('students');
    }

}
?>

Step 4: Create Route

routes/web.php

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/ 

Route::get('student', 'StudentController@index');
Route::post('student', 'StudentController@save')->name('student.save');
?>

Step 5: Create a Model and Controller

php artisan make:controller StudentController --resource --model=Student


Student.php

<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Student extends Model
{
    protected $fillable = [
        'first_name',
        'last_name',
        'email',
        'mobile'
    ];
}
?>



StudentController.php

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use Validator,Redirect,Response,File;
use AppStudent;

class StudentController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        return view('student');
    }


    /**
     * Show the application dashboard.
     *
     * @return IlluminateHttpResponse
     */
    public function save(Request $request)
    {
        $request->validate([
            'txtFirstName'=>'required',
            'txtLastName'=> 'required',
            'txtEmail' => 'required',
            'txtMobile'=>'required'
        ]); 
        $student = new Student([
            'first_name' => $request->get('txtFirstName'),
            'last_name'=> $request->get('txtLastName'),
            'email'=> $request->get('txtEmail'),
            'mobile'=> $request->get('txtMobile')
        ]); 
        $student->save();
        return redirect('/student')->with('success', 'Student has been added');  
     }
}
?>

Step 6: Create Blade Files

reate the student.blade.php files in resources/ views/student/ directory.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel 6 Tutorial</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
            <script>
< !-- jQuery Form Validation code -- >
                $(function () {
                $("#frmAdd").validate({
                rules: {
                txtFname: {
                required: true,
                        lettersonly: true
                },
                        txtLname: {
                        required: true
                        },
                        txtEmail: {
                        required: true,
                                email: true
                        },
                        txtMobile: {
                        required: true,
                                number: true,
                                minlength: 10,
                                maxlength: 10
                        }
                },
                        // Specify the validation error messages
                        messages:
                {
                txtFname: {
                required: "this field required"
                },
                        txtLname: {
                        required: 'this field required'
                        },
                        txtEmail: {
                        required: 'this field required'
                        },
                        txtMobile: {
                        required: 'this field required'
                        }
                }
           });
        });
        </script>
    </script>
</head>
<body>

    <div class="container">
        <form method="post" name="frmAdd" id="frmAdd" action="{{ route('student.save') }}">
            @csrf
            <div class="form-group">
                <label for="txtFname">First Name:</label>
                <input type="text" name="txtFname" class="form-control" id="txtFname" value="">
            </div>
            <div class="form-group">
                <label for="txtLname">Last Name:</label>
                <input type="text" name="txtLname" class="form-control" id="txtLname" value="">
            </div>
            <div class="form-group">
                <label for="txtAddress">Address:</label>
                <textarea type="text" name="txtAddress" class="form-control" id="txtAddress" value=""></textarea>
            </div>
            <div class="form-group">
                <label for="txtEmail">Email:</label>
                <input type="text" name="txtEmail" class="form-control" id="txtEmail" value="">
            </div>
            <div class="form-group">
                <label for="txtMobile">Mobile:</label>
                <input type="text" name="txtMobile" class="form-control" id="txtMobile" value="">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>        
        </form>
    </div>
</body>
</html>

Step 7: Run The Application

php artisan serve