Validation Handling In Laravel Vue Error Step By Step

Generic placeholder image
Brijpal Sharma
laravel vuejs  

Date:-April 03rd, 2020 , Posted On:- Web Development


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 class="container">
      <div class="row justify-content-center">
         <div class="col-md-8">
            <div class="card card-default">
               <div class="card-header">Register Vue</div>
               <div class="card-body">
                  <form>
                     <div class="form-group row">
                        <label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
                        <div class="col-md-6">
                           <input id="name" type="text" class="form-control" v-model="name" required autofocus>
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
                        <div class="col-md-6">
                           <input id="email" type="email" v-bind:class="{ 'is-invalid' : error_email }" class="form-control" v-model="email" required>
                           <small class="text-danger">{{ error_email }} </small>
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                        <div class="col-md-6">
                           <input id="password" type="password"  v-bind:class="{ 'is-invalid' : error_password }" class="form-control" v-model="password" required>
                           <small class="text-danger">{{ error_password }} </small>
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>
                        <div class="col-md-6">
                           <input id="password-confirm" type="password" class="form-control" v-model="password_confirmation" required>
                        </div>
                     </div>
                     <div class="form-group row mb-0">
                        <div class="col-md-6 offset-md-4">
                           <button type="submit" class="btn btn-primary" @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. 

Validation Handling In Laravel Vue Error Step By Step

 

Now Submit Your Form With Validation error. 

Validation Handling In Laravel Vue Error Step By StepHere 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.

 

About the author

user profile
Brijpal Sharma

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...

0 comments

You must be logged in to post a comment.