In this Blog, I going to share Blog on Validation Handling In Laravel Vue Error Step By Step
To demonstrate in the tutorial we will submit a registration form for the user. and create a validation in Registration Controller when the user submits a form with validation errors. we will show in the Register Vue component.
Step: 1 Create a Register Component
First, we are going to create a cue Component for Register Form.
<template>
<div >
<div >
<div >
<div >
<div >Register Vue</div>
<div >
<form>
<div >
<label for="name" >Name</label>
<div >
<input id="name" type=text v-model="name" required autofocus>
</div>
</div>
<div >
<label for="email" >E-Mail Address</label>
<div >
<input id="email" type=email v-bind: v-model="email" required>
<small >{{ error_email }} </small>
</div>
</div>
<div >
<label for="password" >Password</label>
<div >
<input id="password" type=password v-bind: v-model="password" required>
<small >{{ error_password }} </small>
</div>
</div>
<div >
<label for="password-confirm" >Confirm Password</label>
<div >
<input id="password-confirm" type=password v-model="password_confirmation" required>
</div>
</div>
<div >
<div >
<button type=submit @click="handleSubmit">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
Then add Script Code at below of the Registration form
<script>
export default {
props : ['nextUrl'],
data(){
return {
name : "",
email : "",
password : "",
password_confirmation : "",
error_email : "",
error_password : "",
}
},
methods : {
handleSubmit(e) {
e.preventDefault()
if (this.password === this.password_confirmation && this.password.length > 0)
{
axios.post('api/register', {
name: this.name,
email: this.email,
password: this.password,
c_password : this.password_confirmation
})
.then(response => {
localStorage.setItem('user',JSON.stringify(response.data.user))
localStorage.setItem('jwt',response.data.token)
if (localStorage.getItem('jwt') != null){
this.$emit('loggedIn')
if(this.$route.params.nextUrl != null){
this.$router.push(this.$route.params.nextUrl)
}
else{
this.$router.push('dashboard')
}
}
})
.catch(error => {
console.error(error)
this.error_password = error.response.data.error.password
this.error_email = error.response.data.error.email
});
} else {
this.password = ""
this.passwordConfirm = ""
return alert('Passwords do not match')
}
}
}
}
</script>
Step: 2 Create a Register Controller
Now Create Registration controller for Hander Registration Validation.
public function register(Request $request)
{
$validator = Validator::make($request->all(), [
'name' => 'required|max:50',
'email' => 'required|email|unique:users',
'password' => 'required|min:6',
'c_password' => 'required|same:password',
]);
if ($validator->fails()) {
return response()->json(['error' => $validator->errors()], 401);
}
$data = $request->only(['name', 'email', 'password']);
$data['password'] = bcrypt($data['password']);
$user = User::create($data);
$user->is_admin = 0;
return response()->json([
'user' => $user,
'token' => $user->createToken('bigStore')->accessToken,
]);
}
Here I Make Validation for Name, Email, Password, and Confirm Password. minimum password length should be 6 characters, for email Users can not enter duplicate entry for email, and so on. so run your Laravel Vue application.

Now Submit Your Form With Validation error.

Here I entered a 3 character in Password Field so this will show a validation error from Controller. So here We completed the tutorial on Validation Handling In Laravel Vue Error Step By Step
Hope It will Help you.

Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.