Submit form with laravel jquery validation

on

 AjaxFormController.php

<?php

namespace App\Http\Controllers;

use App\Http\Requests\CreateRequest;
use App\Models\Student;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Storage;

class AjaxFormController extends Controller
{
public function AjxForm(){
return view('forms.Ajax-form');
}

public function validateForm(Request $request){
if(strtolower($request['firstName'])=='neeraj'){
return response()->json(false);
}else{
return response()->json(true);
}
}

public function StoreAjaxForm(Request $request){
try {
DB::beginTransaction();
$input = $request->all();
if($request->hasFile('image')){
$input['image'] = Storage::put('image',$request->image);

}
Student::create($input);
return response()->json(['msg'=>'Form Submit Successfully']);
DB::commit();
} catch (\Exception $e) {
DB::rollBack();
Log::error($e);
}
}

public function CheckEmailAlreadyExists(Request $request){
if(!empty($request->email)){
$ExistEmail = Student::where('email',$request->email)->first();
if($ExistEmail){
return response()->json(false);
}
return response()->json(true);
}
}
}


Student.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Casts\Attribute;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
use HasFactory;
protected $fillable =['first_name','last_name','email','phone_number','image'];

protected function email():Attribute{
return Attribute::make(
set:fn(string $value)=>strtolower($value)
);
}

}


Web.php
<?php

use App\Http\Controllers\AjaxFormController;
use Illuminate\Support\Facades\Route;



Route::controller(AjaxFormController::class)->prefix('form')->group(function () {

Route::get('ajax-form','AjxForm')->name('ajax-form');

Route::post('validate-form', 'validateForm')->name('validate.form');
Route::post('validate-exist-email','CheckEmailAlreadyExists')->name('check.email');
Route::post('store-ajax-form','StoreAjaxForm')->name('store.ajax.form');
});


Ajax-form.blade.php
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf_token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>Ajax Form</title>
</head>

<body>
<style>
.form-label{
color:#007bff;
}
.PreviewImage{
height:150px;
width:200px;
border: 1px solid #948b8b;
border-radius:0.3em;
}
.PreviewImage>img{
height: 150px;
width: 200px;
}
</style>
<div class="container pt-3">
<div class="card">
<div class="card-header text-center">
Ajax Form
</div>
<div class="card-body">
<form id="AjaxForm">
<div class="row mb-3">
<div class="col-6 form-group">
<label class="form-label" for="first_name">First Name</label>
<input type="text" class="form-control h-75" id="first_name" name="first_name">
</div>
<div class="col-6 form-group">
<label class="form-label" for="last_name">Last Name</label>
<input type="text" class="form-control h-75" id="last_name" name="last_name">
</div>
</div>
<div class="row mb-3 pt-3">
<div class="col-6 form-group">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control h-75" id="email" name="email">
</div>
<div class="col-6 form-group">
<label for="phone_number" class="form-label">Phone Number</label>
<input type="phone" class="form-control h-75" id="phone_number" name="phone_number">
</div>
</div>
<div class="row mb-3 pt-3">
<div class="col-6 form-group">
<label for="image" class="form-label">Image</label><br>
<input type="file" accept="image/*" name="image" id="image">
<div class="mt-3 d-none" id="PreviewImageGroup">
<div class="PreviewImage mb-3">
<img src="" id="PreviewImage" alt="preview-image">
</div>
<b>File Size:</b> <span id="file_size"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-right">
<button type="submit" class="btn btn-primary btn-lg">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js"
integrity="sha512-WMEKGZ7L5LWgaPeJtw9MBM4i5w5OSBlSjTjCtSnvFJGSVD26gE5+Td12qN5pvWXhuWaWcVwF++F7aqu9cvqP0A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
function ajaxHeader(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('[name="csrf_token"]').attr('content')
}
})
}

const FormSubmitUrl = "{{route('store.ajax.form')}}";
const EmailVailidationUrl = "{{route('check.email')}}";
</script>
<script src="{{asset('assets/js/validate-form.js')}}"></script>



</html>


validate-form.js
$(document).ready(function () {
ajaxHeader();

//Preview File When File Is Uploaded
$("#image").on('change',function(e){
const file = e.target.files[0];
console.info("file:",file);
const file_url = URL.createObjectURL(file);
const file_size_in_bytes = file.size;
const file_size_in_kb = (file_size_in_bytes/1024).toFixed(2);
$("#PreviewImage").attr('src',file_url);
$("#file_size").text(file_size_in_kb+" KB");
$("#PreviewImageGroup").removeClass('d-none');

});

//File Size Validation Method
$.validator.addMethod('filesize', function (value, element, param) {
return this.optional(element) || (element.files[0].size <= param*Number(1e+5).toFixed(2))
}, 'File size must not greater than {0} MB');


$("#AjaxForm").submit(function (e) {
e.preventDefault();
}).validate(
{
rules:{
first_name:{
required:true,
maxlength:255,
},
last_name:{
required:true,
maxlength:255,
},
email:{
required:true,
remote:{
url:EmailVailidationUrl,
type:'POST',
}

},
phone_number:{
required:true,
maxlength:11,
minlength:10,
},
image:{
required:true,
filesize:true,
}
},
messages:{
first_name:{
required:"First name is required",
},
last_name:{
required:"Last name is required",
},
email:{
required:"Email is required",
remote:"This email already exists"
},
image:{
required:"Image is required",
filesize:"Image size not greate than 100 kb"
}


},
errorElement: 'span',
errorPlacement: function(err, element) {
err.addClass('invalid-feedback');
element.closest('.form-group').append(err);
},
highlight: function(element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass('is-invalid');
},
submitHandler: function() {
const fd= new FormData();
const image = $('#image')[0].files[0];
const FormFieldValues = $("#AjaxForm").serializeArray();
$.each(FormFieldValues, function(){
fd.append(this.name,this.value);
});
fd.append('image',image);
FormStoreRequest(fd);
}
}
);

//Form Submit Request
function FormStoreRequest(fd){
$.ajax({
url: FormSubmitUrl,
enctype: 'multipart/form-data',
processData: false,
contentType: false,
type: 'post',
data: fd,
success:function(res){
alert(res.msg);
}
});
}

});

Comments

Post a Comment

If you any doubt of any topic then you can comment me.