Prevent route change if input field validation fails

Question

I'm using VueRouter to make a single page application and VeeValidate for validation. I want to add a method that checks the status of valid inputs on a page in order to determine whether or not to progress.

An input would look like this:

<input 
  type="text"
  class="ze-input"
  placeholder="Enter mobile number"
  v-validate="'required'" 
  :class="{'input': true, 'is-danger': errors.has('mobile number') }" 
  name="mobile number"
>

I use a router-link to progress with the router:

<router-link to="send_to_hospital" class="col-sm-12 navigation ze-button">
  Next
</router-link>

How can I validate the page when the router-link is clicked and stop progression if the validation fails?

My routing configuration file:

import Vue from 'vue'
import Router from 'vue-router'
import HowCanWeHelpYou from '@/components/how_can_we_help_you'
import AboutSelf from '@/components/about_self'
import AppointmentInfo from '@/components/appointment_info'
import ContactUs from '@/components/contact_us'
import SendToHospital from '@/components/send_to_hospital'
import Confirmed from '@/components/confirmed'

import VeeValidate from 'vee-validate'
import vmodal from 'vue-js-modal'

Vue.use(VeeValidate)
Vue.use(vmodal)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '/',
      component: HowCanWeHelpYou
    },
    {
      path: '/about_self',
      name: 'about_self',
      component: AboutSelf
    },
    {
      path: '/appointment_info',
      name: 'appointment_info',
      component: AppointmentInfo
    },
    {
      path: '/contact_us',
      name: 'contact_us',
      component: ContactUs
    },
    {
      path: '/send_to_hospital',
      name: 'send_to_hospital',
      component: SendToHospital
    },
    {
      path: '/confirmed',
      name: 'confirmed',
      component: Confirmed
    }
  ]
})

thanksd · Accepted Answer · 2017-06-12 21:15:38Z

1

Vue Router allows you to set Navigation Guards in a few different places. These guards are hooks wherein you can validate the fields when the route changes and then prevent the change if any fields are invalid.

It would probably make the most sense to add a beforeRouteLeave guard to the component which contains the fields:

beforeRouteLeave(to, from, next) {
  // Tells VeeValidate to validate all the fields in the component's scope
  this.$validator.validateAll(); 

  if (!this.errors.any()) { // if there are no errors
    next(); // go to the next route
  }

  // otherwise, next() doesn't get called and the route doesn't change
}

answered Jun 12, 2017 at 21:15

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent route change if input field validation fails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related