Step 1: Add Route
routes/web.php
Route::get('my-form','HomeController@myform');
Route::post('my-form','HomeController@myformPost')->name('my.form');
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator;
class HomeController extends Controller
{
/**
* Display a listing of the myform.
*
* @return \Illuminate\Http\Response
*/
public function myform()
{
return view('myform');
}
/**
* Display a listing of the myformPost.
*
* @return \Illuminate\Http\Response
*/
public function myformPost(Request $request)
{
$validator = Validator::make($request->all(), [
'first_name' => 'required',
'last_name' => 'required',
'email' => 'required|email',
'address' => 'required',
]);
if ($validator->passes()) {
return response()->json(['success'=>'Added new records.']);
}
return response()->json(['error'=>$validator->errors()->all()]);
}
<script> if ($("#post-form").length > 0) { $("#post-form").validate({ rules: { name: { required: true, maxlength: 50 }, email: { required: true, maxlength: 250 } , password: { required: true, maxlength: 250 } }, messages: { name: { required: "Please Enter Name", maxlength: "Your last name maxlength should be 50 characters long." }, email: { required: "Please Enter Body", maxlength: "Your last body maxlength should be 250 characters long." }, password: { required: "Please Enter Body", maxlength: "Your last body maxlength should be 250 characters long." }, }, submitHandler: function (form) { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $('#send_form').html('Sending..'); $.ajax({ url: '/save-form', type: "POST", data: $('#post-form').serialize(), success: function (response) { $('#send_form').html('Submit'); $('#res_message').show(); $('#res_message').html(response.msg); $('#msg_div').removeClass('d-none'); document.getElementById("post-form").reset(); setTimeout(function () { $('#res_message').hide(); $('#msg_div').hide(); }, 10000); } }); } }) } </script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script> <style> .error { color: red; } </style> </head> <body> <div class="container"> <form id="post-form" method="post" action="javascript:void(0)"> @csrf <div class="col-md-12"> <div class="alert alert-success d-none" id="msg_div"> <span id="res_message"></span> </div> </div> <div class="col-md-12"> <div class="form-group"> <label>Name<span class="text-danger">*</span></label> <input type="text" name="name" placeholder="Enter name" class="form-control"> <span class="text-danger p-1">{{ $errors->first('name') }}</span> </div> </div> <div class="col-md-12"> <div class="form-group"> <label>Email<span class="text-danger">*</span></label> <input type="text" name="email" placeholder="Enter eamil" class="form-control"> <span class="text-danger p-1">{{ $errors->first('email') }}</span> </div> </div> <div class="col-md-12"> <div class="form-group"> <label>Password<span class="text-danger">*</span></label> <input type="password" class="form-control" name="password" placeholder="Enter your password"> <span class="text-danger">{{ $errors->first('Password') }}</span> </div> </div> <div class="col-md-12"> <button type="submit" id="send_form" class="btn btn-block btn-success">Submit</button> </div> </form> </div> </body> <script> if ($("#post-form").length > 0) { $("#post-form").validate({ rules: { name: { required: true, maxlength: 50 }, email: { required: true, maxlength: 250 } , password: { required: true, maxlength: 250 } }, messages: { name: { required: "Please Enter Name", maxlength: "Your last name maxlength should be 50 characters long." }, email: { required: "Please Enter Body", maxlength: "Your last body maxlength should be 250 characters long." }, password: { required: "Please Enter Body", maxlength: "Your last body maxlength should be 250 characters long." }, }, submitHandler: function (form) { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $('#send_form').html('Sending..'); $.ajax({ url: '/save-form', type: "POST", data: $('#post-form').serialize(), success: function (response) { $('#send_form').html('Submit'); $('#res_message').show(); $('#res_message').html(response.msg); $('#msg_div').removeClass('d-none'); document.getElementById("post-form").reset(); setTimeout(function () { $('#res_message').hide(); $('#msg_div').hide(); }, 10000); } }); } }) } </script> </html>