ثبت فرم با ajax در لاراول به همراه Validation

در این پست میخوام ثبت فرم با ajax در لاراول به همراه Validation 5.6 رو توضیح بدم خدمتتون. در لاراول این کار رو به راحتی می‌شه انجامش داد.

فرض بگیریم می‌خوایم یه صفحه برای تماس با ما بسازیم:

اول از همه داخل ترمینال برای ساخت کنترلر دستور زیر رو وارد می‌کنیم:

php artisan make:controller ContactController

بعد از این کار فایل views رو می‌سازیم. من یک فایل به اسم contact.blade.php در پوشه‌ی forms در views ساختم.

داخل تگ head این متا تگ رو وارد کنید:

<meta name="_token" content="{{csrf_token()}}" />

حالا کد فرم رو توی صفحه وارد کنید:

<div class="alert alert-danger" style="display:none"></div>
<form action="/contact" method="post">
{{ csrf_field() }}
<div class="form-group">
<label>نام</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label>پست الکترونیک</label>
<input type="text" name="email" id="email"  class="form-control">
</div>
<div class="form-group">
<label>موضوع</label>
<input type="text" name="subject" id="subject" class="form-control">
</div>
<div class="form-group">
<label>پیغام</label>
<textarea rows="5" name="msg" id="msg" class="form-control"></textarea>
 </div>
<button class="btn" type="submit" id="submit">ارسال پیغام</button>
</form>

خط اول برای نمایش خطا‌ها هستش و خط ۳ هم برای امنیت فرممون.

حالا کد‌های jquery رو وارد می‌کنم. فرضم بر این هستش که می‌دونید این‌ها باید بعد از صدا زده شدن خود فایل اصلی 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('/contact') }}",
                method: 'post',
                data: {
                    name: jQuery('#name').val(),
                    email: jQuery('#email').val(),
                    subject: jQuery('#subject').val(),
                    msg: jQuery('#msg').val()
                },
                  success: function(data){
                  		jQuery.each(data.errors, function(key, value){
                  			jQuery('.alert-danger').show();
                  			jQuery('.alert-danger').append('<p>'+value+'</p>');
                  		});
                	}
                    
                  });
               });
            });
</script>

خب حالا میریم Route هامون رو بنویسیم. فایل web.php از پوشه‌ی routes رو باز کنید و این موارد را داخلش قرار بدید:

Route::get('contact','ContactController@show');
Route::post('contact','ContactController@store');

حالا فایل ContactController.php رو از پوشه‌ی app/Http/Controllers باز کنید.

داخل کلاس برای show این کد رو قرار میدیم که صفحه ما لود بشه:

    public function show(){
		return view('forms.contact');
    }

برای گرفتن اطلاعات هم این دستورات رو قرار می‌دیم:

 public function store(Request $request)
    {
        $validator = \Validator::make($request->all(), [
			'name' => 'required',
			'email' => 'required|email',
			'subject' => 'required',
			'msg' => 'required',
        ]);
        
        if ($validator->fails())
        {
            return response()->json(['errors'=>$validator->errors()->all()]);
        }
        return response()->json(['success'=>'با موفقیت ذخیره شد.']);
        
 }

خب حالا یه مشکل داریم. حتی اگه از زبان فارسی هم استفاده کنید، یه خورده زشت میشه اررورهای فرم.

برای همین من اومدم یه تابع دیگه به این کلاس اضافه کردم به این صورت:

public function messages()
	{
		return [
			'name.required'    => 'نام خالی است.',
			'subject.required'    => 'موضوع خالی است.',
			'email.required' => 'ایمیل اشتباه است',
			'email.email' => 'ایمیل اشتباه است',
			'msg.required'      => 'پیغام خالی است',
		];
	}

حالا کد store رو به این صورا تغییر دادم:

 public function store(Request $request)
    {
        $validator = \Validator::make($request->all(), [
			'name' => 'required',
			'email' => 'required|email',
			'subject' => 'required',
			'msg' => 'required',
        ],$this->messages());
        
        if ($validator->fails())
        {
            return response()->json(['errors'=>$validator->errors()->all()]);
        }
        return response()->json(['success'=>'با موفقیت ذخیره شد.']);
        
 }

اینجوری پیغام‌هام رو هم می‌تونم کنترل کنم.

اگه سوالی داشتید در خدمتم.