تماس با ما درباه با ما درخواست پروژه
خوراک سایت
آموزش تایید اعتبار "Validation" فرم ها بصورت Ajax در Laravel - به زبان ساده

آموزش تایید اعتبار "Validation" فرم ها بصورت Ajax در Laravel - به زبان ساده

در این مطلب قصد داریم اعتبار سنجی داده های دریافتی از سمت کاربر را که بصورت Ajax به سرور ارسال می شوند توسط لاراول بررسی و نتیجه آن را برای کاربر نمایش دهیم. در حالت پیش فرض در Laravel شما می توانید به راحتی انواع پیغام های خطا را برای کاربران خود درصورت عدم اعتبار داده ها نمایش دهید، اما در حالتی که شما قصد استفاده از تکنولوژی Ajax دارید کمی کار پیچیده تر می شود. 

Laravel Ajax Validation Tutorial From 

اعتبار سنجی آجاکس در لاراول

در این مطلب قصد داریم اعتبار سنجی داده های دریافتی از سمت کاربر را که بصورت Ajax به سرور ارسال می شوند را توسط لاراول بررسی کنیم و نتیجه آن را برای کاربر نمایش دهیم.

در حالت پیش فرض لاراول شما می توانید به راحتی انواع پیغام های خطا را برای کاربران خود درصورت عدم اعتبار داده ها نمایش دهید، اما در حالتی که شما قصد استفاده از تکنولوژی Ajax دارید کمی کار پیچیده تر می شود. 

البته نگران نباشید، در این مطلب ما همه موارد را به شما آموزش خواهیم داد و شما قادر خواهید بود به راحتی اعتبار سنجی بصورت Ajax را در لاراول برای بخش های مختلف وبسایت خود اجرا و پیاده سازی کنید.

1- ایجاد فرم:

کدهای زیر را در یک blade بنام create.blade.php قرار دهید:

<html lang="en">
<head>
    <title>Laravel Ajax Validation Tutorial</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>


<div class="container">
        <h3 class="jumbotron">Laravel Ajax Validation</h3>
    <form>
        <div class="form-group">
            <label>Footballer Name</label>
            <input type="text" name="footballername" class="form-control" placeholder="Enter Footballer Name" id="footballername">
        </div>


        <div class="form-group">
            <label>Club</label>
            <input type="text" name="club" class="form-control" placeholder="Enter Club" id="club">
        </div>


        <div class="form-group">
            <strong>Country</strong>
            <input type="text" name="country" class="form-control" placeholder="Enter Country" id="country">
        </div>


        <div class="form-group">
            <button class="btn btn-success" id="submit">Submit</button>
        </div>
    </form>
</div>

</body>
</html>

2- افزودن کدهای Ajax 

با استفاده از تابع ajax مقادیر به روت form بصورت POST ارسال خواهد شد، و سپس نتیجه آن درصورتی که حاوی خطا باشد با استفاده از تابع each در jQuery نمایش داده خواهد شد.

 

<script type="text/javascript">

         jQuery(document).ready(function(){
            jQuery('#submit').click(function(e){
               e.preventDefault();
               jQuery.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
               jQuery.ajax({
                  url: "{{ url('/form') }}",
                  method: 'post',
                  data: {
                     name: jQuery('#footballername').val(),
                     type: jQuery('#club').val(),
                     price: jQuery('#country').val()
                  },
                  success: function(data){
                  		jQuery.each(data.errors, function(key, value){
                  			jQuery('.alert-danger').show();
                  			jQuery('.alert-danger').append('<p>'+value+'</p>');
                  		});
                	}
                    
                  });
               });
            });
</script>

 

یعنی محتوای فایل  create.blade.php باید بصورت زیر باشد:

//create.blade.php
<html lang="en">
<head>
    <meta name="_token" content="{{csrf_token()}}" />
    <title>Laravel Ajax Validation Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>


<div class="container">
        <h3 class="jumbotron">Laravel Ajax Validation</h3>
        <div class="alert alert-danger" style="display:none"></div>
    <form>
        <div class="form-group">
            <label>Footballer Name</label>
            <input type="text" name="footballername" class="form-control" placeholder="Enter Footballer Name" id="footballername">
        </div>


        <div class="form-group">
            <label>Club</label>
            <input type="text" name="club" class="form-control" placeholder="Enter Club" id="club">
        </div>


        <div class="form-group">
            <strong>Country</strong>
            <input type="text" name="country" class="form-control" placeholder="Enter Country" id="country">
        </div>


        <div class="form-group">
            <button class="btn btn-success" id="submit">Submit</button>
        </div>
    </form>
</div>

<script type="text/javascript">

         jQuery(document).ready(function(){
            jQuery('#submit').click(function(e){
               e.preventDefault();
               jQuery.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
               jQuery.ajax({
                  url: "{{ url('/form') }}",
                  method: 'post',
                  data: {
                     name: jQuery('#footballername').val(),
                     type: jQuery('#club').val(),
                     price: jQuery('#country').val()
                  },
                  success: function(data){
                  		jQuery.each(data.errors, function(key, value){
                  			jQuery('.alert-danger').show();
                  			jQuery('.alert-danger').append('<p>'+value+'</p>');
                  		});
                	}
                    
                  });
               });
            });
</script>

</body>
</html>

 

3- ایجاد Route ها:

 - ابتدا یک کنترلر بنام FormController ایجاد و سپس کدهای زیر را در فایل web.php پروژه خود قرار دهید

Route::get('form','FormController@create');
Route::post('form','FormController@store');

ما دو روت ایجاد کرده ایم، یک روت برای نمایش فرم که بصورت get می باشد و روت دیگر برای دریافت اطلاعات فرم که بصورت post می باشد.

 

4- ایجاد تابع store  برای دریافت اطلاعات فرم در کنترل FormController:

 public function store(Request $request)
    {
        $validator = \Validator::make($request->all(), [
            'footballername' => 'required',
            'club' => 'required',
            'country' => 'required',
        ]);
        
        if ($validator->fails())
        {
            return response()->json(['errors'=>$validator->errors()->all()]);
        }
        return response()->json(['success'=>'Record is successfully added']);
        
 }

توضیح کد بالا:

ما ابتدا با استفاده ازتابع make از فساد Validator  مقادیر ارسال شده از سمت کاربر که از طریق فرم ارسال شده اند را بررسی کرده ایم. همانطور که مشاهده می کنید با استفاده از مقدار required گفته ایم که حتما باید یه فیلد footballername,club و country باید وارد توسط کاربر وارد شده باشد

حال اگر کاربر یکی از سه فیلد بالا را خالی گذاشته باشد با استفاده از تابع fails بررسی می شود:

 if ($validator->fails())
        {
            return response()->json(['errors'=>$validator->errors()->all()]);
        }

این شرط بررسی خواهد کرد در صورتی که مقدار $validator حاوی خطا باشد با استفاده از هلپر response و  بصورت json پیغام خطایی برای کاربر نمایش داده خواهد شد و درصورتی هم که کاربر همه فیلد ها را پرکرده باشد این بخش اجرا نخواهد شد و در نهایت کد زیر اجرا خواهد شد و باز هم با استفاده از هلپر response و تابع josn پیغام 'Record is successfully added' به کاربر نمایش داده خواهد شد

 

شما می توانید به این صورت بخش های مختلف وب سایت خود همچون عضویت، ورود، خروج، ارسال نظر، ارسال مطلب و... را بصورت Ajax ایجاد کنید و جذابیت کار با وبسایت و سرعت وب سایت خود را افزایش دهید.

 

در صورتی که سوالی دارید می توانید از بخش نظرات ارسال فرماییدwink


برچسب ها:

laravel-ajax-validate laravel ajax-validate احراز-هویت-اجاکس-در-لاراول آموزش-لاراول لاراول آمو آموزش-برنامه-نویسی-لاراول php آموزش-آجاکس ajax

دسته بندی ها:

لاراول

ارسال نظر

برای اطلاع از پاسخ به نظر شما می توانید ایمیل یا شماره موبایل خود را وارد نمایید. *

ایمیل و شماره موبایل شما کاملا مخفی خواهد ماند و در سایت نمایش داده نخواهد شد. *

اگر نظری برای این مطلب ارسال شد از طریق ایمیل مرا اطلاع بده!
لسیت نظرات
هنوز برای این مطلب نظری ارسال نشده است!