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