همونطورکه میدونید لاراول یکی از بهترین روش های تایید اعتبار فرم ها رو داره و خیلی راحت و با قدرت زیاد میتونه فرم های ما رو تایید اعتبار کنه ، فقط نکته اینجاست که برای این که این تایید اعتبار اتفاق بیفته باید فرم سابمیت بشه و به اطلاعات به سمت بک اند یا به عبارتی کنترلر بره تا لاراول اطلاعات فرم رو  ولیدیت (validate) کنه و در صورتی که مشکلی داشته باشه و یا اطلاعات وارد شده با رول (rule) یا قواعدی که ما در نظر گرفتیم نخونه ، لاراول با هدر استاتوس (header status) 422 برمیگردونه که نوع خطاس  .

حالا ما برای ولیدیت (validate) کردن فرممون چند تا راه داریم یکی این که فرم رو سابمیت کنیم و اطلاعات بره برگرده تا در صورتی که مشکلی داشت دوباره اطلاعات خطا برگرده به صفحه قبلی و ما بتونیم نمایشش بدیم برای نمایش خطا های ولیدیت (validate) با رفرش شدن صفحه باید کد زیر رو توی صفحتون قرار بدید

@foreach($errors->all() as $error)
         <div class="alert alert-error" role="alert">
           <strong>  خطا  </strong>
           <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
         </div>
@endforeach

وقتی از این روش استفاده کنید چون صفحه رفرش شده اطلاعاتی که از قبل وارد شده باشه تو فرم از بین میره و کاربر مجبوره دوباره اطلاعات رو وارد کنه برای رفع این مشکل لاراول یه راه گذاشته به این شکل که ما میتونیم مقدار قبلی ای که از قبل برای یه اینپوت وارد شده رو بازیابی کنیم برای این کار به شکل زیر عمل میکنیم

<input type="text" name="first_name" value="{{old('first_name')}}">

در کد بالا ما برای اینپوت با name = “first_name” مقدار قبلیش رو فراخونی کردیم که با استفاده از کد old میتونیم این کار رو انجام بدیم و داخل old باید name مربوط به اون اینپوت مورد نظرمون رو بنویسیم .

اما زمانی که ما بخوایم یه فرم رو به صورت ajax بفرستیم داستان عوض میشه و ما نیازه که به یه شکل دیگه ارور  های ولیدیت (validate) رو نشون کاربر بدیم  .

توجه داشته باشید که ما میتونیم ولیدیت هامون رو قبل از اینکه به سمت بک اند(BackEnd) بره با استفاده  ولیدیشن های مختلفی که به صورت جی کوئری (jquery) هست انجام بدیم ولی خب قدرتی که ولیدیشن های لاراول داره رو نداره ، به عنوان مثال ما میتونیم با استفاده رول (Rule ) unqiue و یا exists یه ولیدیشن در رابطه با مقداری که وارد شده و یکتا بودن و یا موجود بودن دیتا در جدول دیتابیس داشته باشیم و به راحتی چک کنیم ولی با جی کوئری همچین چیزی میسر نیست .

به کد ایجکسی زیر توجه کنید (Ajax)

$data = $("#AddEditForm").serialize();
            $.ajax({
                method:'POST',
                url:'/panel/users/add',
                data:$data,
                success:function (result){
                    //Some Success Code
                },
                error:function (result){
                    $error = '';
                    $.each(result.responseJSON.errors, function(key,value) {
                        $error = $error + '<li><b>' + value + '</b></li>'
                    });
                    Swal.fire({
                        title: 'خطا',
                        icon: 'error',
                        html:
                            '<ol>' +
                            $error +
                            '</ol>',
                        showCloseButton: true,
                        focusConfirm: true,
                        confirmButtonText:
                            'تایید!',
                    });
                },
            });

در کد بالا ابتدا فرممون رو با استفاده از متد serialize() سریالایز کردیم و ریختیم داخل متغیر Data و بعد از اون هم که کد مربوط به ایجکس و آدرس ، نوع متد و … رو هم مشخص کردیم . در صورتی که کد با موفقیت اجرا بشه فانکشن Success (success:function) اجرا میشه ولی در صورتی که خطا داشته باشیم فانکشن error برامون اجرا میشه (error:function) و همونطور که میبینید در هر دو فانکشن result به عنوان نتیجه اجرای ایجکس برامون برگردونده میشه .

قطعه کد زیر یه حلقه هستش که تمام ارور های موجود در ولیدیشن رو برامون میگیره و این حلقه تا زمانی ادامه پیدا میکنه که ارور های ولیدیشن های ما تموم شده باشه

$error = '';
                    $.each(result.responseJSON.errors, function(key,value) {
                        $error = $error + '<li><b>' + value + '</b></li>'
                    });

اگه دقت کنید من تمام خطا های موجود در این validation رو به صورت <li></li> در آوردم و توی متغیر errors ریختم و بعد از اون با استفاده sweetalert2 مقادری errors رو داخل تگ <ol></ol> قرار دادم به این شکل تمام ارور ها در یک سوئیت آلرت برای ما نمایش در میاد (Sweet Alert)

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

sweetalert2