Validation Handling In Laravel Vue Error Step By Step

Brijpal Sharma
laravel vuejs   Publish on:-April 03rd, 2020 , Category:- 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 >
   <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. 

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.

 


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.