Laravel Form Validation-Client side and server side using Ajax | Learning Curve- Perfect Tutorial for the beginers

Below code shows simple form entry in laravel using Ajax. It uses the server side validation as well as client side validation

Code for Routes.php,view and controllers are defined here..

Routes.php

<?php
Route::get('/mypage', 'MyPageController@index');
Route::post('checkAndSavedata','MyPageController@checkAndSavedata');

?>

<?php

Route::get('/mypage', 'MyPageController@index');

Route::post('checkAndSavedata','MyPageController@checkAndSavedata');

MypageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use Response;
use Validator;
class MypageController extends Controller
{
        
    public function index()
    {
        return view('mylistpage');
    }
    
    public function checkAndSavedata(Request $request)
    {
            
            $rules = array('input_val' => 'Required|Min:3|Max:50');
            $messsages = array('input_val.required' => 'This field is required.',
            'input_val.min' => 'This field must be at least 3 characters.',
            'input_val.max' => 'This field may not be greater than 50 characters.'
        );
            
          $validator = Validator::make($request->all(), $rules, $messsages);
            if ($validator->fails()) {
            return Response::json(array(
                        'status' => false,
                        'errors' => $validator->getMessageBag()->toArray()
                            ), 200);
        } else {   
            $input_val=$request->input('input_val');
            //db insertion and other checking comes here
        ///check the db data and return result       
        return Response::json(array('status'=>true));
    }
    }
}
?>

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use Response;

use Validator;

class MypageController extends Controller

{

public function index()

{

return view('mylistpage');

}

public function checkAndSavedata(Request $request)

{

$rules = array('input_val' => 'Required|Min:3|Max:50');

$messsages = array('input_val.required' => 'This field is required.',

'input_val.min' => 'This field must be at least 3 characters.',

'input_val.max' => 'This field may not be greater than 50 characters.'

);

$validator = Validator::make($request->all(), $rules, $messsages);

if ($validator->fails()) {

return Response::json(array(

'status' => false,

'errors' => $validator->getMessageBag()->toArray()

), 200);

} else {

$input_val=$request->input('input_val');

//db insertion and other checking comes here

///check the db data and return result

return Response::json(array('status'=>true));

}

View page:mylistpage.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Welcome</div>

                <div class="panel-body">
<input type="text" name="mydata" id="mydata">
        <button id="savbutton">Save Data</button>
        <span id="msg" style="color:red;"></span></div>
            </div>
        </div>
        
    </div>
</div>
</body>
</html>
<script>
    $(document).on('click','#savbutton',function(){
        
        var mydata_input=$.trim($('#mydata').val());

        if(mydata_input=="")
        {
            $('#msg').html('please enter the value');
            $('#mydata').focus();
            return false;
        }
        else
        { 
            var input_parameter='input_val='+mydata_input;
            $.ajax({
                url:'{{url("checkAndSavedata")}}',
                async:true,
                type:"POST",
                data:input_parameter,
                dataType:"JSON",
                success:function(data){
                   if(data.status==false)
                   {
                        var errorsHtml = '';
                    var errors = data.errors;
                    $.each(errors, function (key, value) {
                        errorsHtml += '<span>' + value[0] + '</span><br>';
                    });

                    
                    $("#msg").html(errorsHtml);
                    return false;
                   }
                   else  if(data.status==true)
                   {
                   $("#mydata").val('');
                   $("#mydata").focus();
                   var successMessge="<span>Data Entered Successfully</span>";
                   $("#msg").html(successMessge);
                }
                }        
            });
            
        }
    });
   

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    </script>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<div class="panel-heading">Welcome</div>

</div>

</body>

</html>

$(document).on('click','#savbutton',function(){

var mydata_input=$.trim($('#mydata').val());

if(mydata_input=="")

{

$('#msg').html('please enter the value');

$('#mydata').focus();

return false;

}

else

{

var input_parameter='input_val='+mydata_input;

$.ajax({

url:'{{url("checkAndSavedata")}}',

async:true,

type:"POST",

data:input_parameter,

dataType:"JSON",

success:function(data){

if(data.status==false)

{

var errorsHtml = '';

var errors = data.errors;

$.each(errors, function (key, value) {

errorsHtml += '<span>' + value[0] + '</span><br>';

});

$("#msg").html(errorsHtml);

return false;

}

else if(data.status==true)

{

$("#mydata").val('');

$("#mydata").focus();

var successMessge="<span>Data Entered Successfully</span>";

$("#msg").html(successMessge);

}

});

}

});

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

</script>