Validation Handling In Laravel Vue Error Step By Step

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.