اعتبارسنجی فرم ثبت نام با ajax در لاراول 5.8
ساخت RESTful API برای عملیات CRUD در لاراول به همراه احراز هویت با استفاده از Passport
17 فروردین 1398
نحوه ایجاد صفحه خطای 404 در لاراول 5.8
25 فروردین 1398
اعتبارسنجی فرم ثبت نام با ajax در لاراول 5.8 ، موضوعی است که در این مقاله از تجاری اپ قصد داریم آن را در قالب یک مثال به شما آموزش دهیم.ما می توانیم به آسانی برای اعتبارسنجی فرم در لاراول از تکنیک ajax در jquery استفاده کنیم ، همچنین می توانیم پیام های خطای اعتبارسنجی را با ajax در لاراول نمایش دهیم.
اعتبارسنجی فرم ثبت نام با ajax در لاراول 5.8 ، موضوعی است که در این مقاله از تجاری اپ قصد داریم آن را در قالب یک مثال به شما آموزش دهیم.ما می توانیم به آسانی برای اعتبارسنجی فرم در laravel از تکنیک ajax در jquery استفاده کنیم ، همچنین می توانیم پیام های خطای اعتبارسنجی را با ajax در لاراول نمایش دهیم.
ما به آسانی می توانیم با استفاده از درخواست jquery ajax از اعتبارسنجی لاراول مانند (required ، email ، same ، unique و…) استفاده کنیم.
اگر شما از اعتبارسنجی لاراول برای فرم های وب خود در پروژه های لاراول 5.8 استفاده کنید همیشه عالی خواهد بود. یا به بیانی دیگر اگر شما به jquery ajax نیاز نداشته باشید یا کلا تمایلی به استفاده از آن نداشته باشید می توانید به سادگی از laravel validation استفاده کنید زیرا لاراول یک راه ساده برای اعتبارسنجی بدون ajax را به شما ارائه می دهد ، اما اگر شما قصد داشته باشید اعتبارسنجی لاراول را به همراه ajax انجام دهید کار شما کمی سخت خواهد شد.ما در این مقاله با یک مثال اعتبارسنجی فرم ثبت نام با ajax در لاراول 5.8 را به شما آموزش خواهیم داد. در این مثال ما به شما نحوه ی استفاده از اعتبارسنجی پیش فرض لاراول را با jquery ajax نشان خواهیم داد. همچنین پیام های خطای اعتبارسنجی لاراول هنگامی که Form بدرستی پر نشده باشد را نمایش می دهیم.
سرفصل های آموزش اعتبارسنجی فرم ثبت نام با ajax در لاراول 5.8
گام 1 : نصب لاراول و پیکربندی اولیه
برای هر پروژه لاراول ما نیاز داریم که لاراول را نصب کنیم. به همین دلیل ما یک مقاله در رابطه با چگونگی نصب و پیکربندی اولیه لاراول آماده کرده ایم که می توانید از اینجا ان را مشاهده نمایید : آموزش نصب لاراول به همراه تنظیمات اولیه
گام 2 : افزودن مسیر (Route)
دراین مرحله ما دو مسیر (Route) جدید برای پروژه ایجاد خواهیم کرد. بنابراین فایل routes/web.php پروژه خود را باز کنید و Route های زیر را به آن اضافه کنید.
Route::get('my-form','HomeController@myform');
Route::post('my-form','HomeController@myformPost');
گام 3 : ایجاد کنترلر
در این مرحله ما باید یک کنترلر جدید ایجاد کنیم .پس با اجرای دستور زیر یک کنترلر با نام HomeController ایجاد نمایید:
php artisan make:controller HomeController
بعد از اجرای دستور بالا به مسیر app/Http/Controllers/HomeController.php رفته و کنترلر HomeController را پیدا کنید.در این کنترلر ما برای مشاهده و ارسال ajax دو متد با نام های myform() و myformPost() می نویسم.
بنابراین کدهای زیر را درون فایل HomeController.php پروژه خود وارد کنید:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator;
class HomeController extends Controller
{
/**
* Display a listing of the myform.
*
* @return \Illuminate\Http\Response
*/
public function myform()
{
return view('myform');
}
/**
* Display a listing of the myformPost.
*
* @return \Illuminate\Http\Response
*/
public function myformPost(Request $request)
{
$messages = [
'first_name.required' => 'وارد کردن نام الزامی است!',
'last_name.required' => 'وارد کردن نام خانوادگی الزامی است!',
'email.required' => 'وارد کردن ایمیل الزامی است!',
'email.email' => 'آدرس ایمیل معتبر نمی باشد!',
'address.required' => 'وارد کردن آدرس الزامی است!',
];
$validator = Validator::make($request->all(), [
'first_name' => 'required',
'last_name' => 'required',
'email' => 'required|email',
'address' => 'required',
], $messages);
if ($validator->passes()) {
return response()->json(['success'=>'Added new records.']);
}
return response()->json(['error'=>$validator->errors()->all()]);
}
}
گام 4 : ایجاد فایل view
در مرحله اخر برای صفحه فرم و نوشتن کدهای طراحی و کدهای jquery ajax در مسیر resources/views یه فایل با نام myform.blade.php ایجاد کنید و کدهای زیر را در آن وارد کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>اعتبارسنجی فرم ثبت نام با ajax در لاراول 5.8 - وب سایت تجاری اپ</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
<style>
body{
direction: rtl;
text-align: right;
}
.container h2{
margin: 50px auto;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>اعتبارسنجی فرم ثبت نام با ajax در لاراول 5.8 - وب سایت تجاری اپ</h2>
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<form>
{{ csrf_field() }}
<div class="form-group">
<label><strong>نام:</strong></label>
<input type="text" name="first_name" class="form-control" placeholder="نام">
</div>
<div class="form-group">
<label><strong>نام خانوادگی:</strong></label>
<input type="text" name="last_name" class="form-control" placeholder="نام خانوادگی">
</div>
<div class="form-group">
<label><strong>ایمیل:</strong></label>
<input type="text" name="email" class="form-control" placeholder="ایمیل">
</div>
<div class="form-group">
<label><strong>آدرس:</strong></label>
<textarea class="form-control" name="address" placeholder="آدرس"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success btn-submit float-left">ثبت نام</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-submit").click(function(e){
e.preventDefault();
var _token = $("input[name='_token']").val();
var first_name = $("input[name='first_name']").val();
var last_name = $("input[name='last_name']").val();
var email = $("input[name='email']").val();
var address = $("textarea[name='address']").val();
$.ajax({
url: "/my-form",
type:'POST',
data: {_token:_token, first_name:first_name, last_name:last_name, email:email, address:address},
success: function(data) {
if($.isEmptyObject(data.error)){
alert(data.success);
}else{
printErrorMsg(data.error);
}
}
});
});
function printErrorMsg (msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
</script>
</body>
</html>
خب کدنویسی این مثال به پایان رسید و حالا ما می توانیم آن را اجرا کنیم ، با اجرای دستور زیر می توانید پروژه خود را اجرا نمایید:
php artisan serve
و در آخر می توانید URL زیر را در مرورگر خود باز کنید تا پروژه خود را مشاهده نمایید:
http://localhost:8000/my-form
گام 5 : تصویری از خروجی پروژه
امیدوارم این آموزش به شما کمک کرده باشد.
