How to do Ajax form validation In Laravel
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
1 2 3 4 5 |
<?php Route::get('/mypage', 'MyPageController@index'); Route::post('checkAndSavedata','MyPageController@checkAndSavedata'); ?> |
MypageController.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!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> |