javascript - Vue Vee-validate marking valid URLs as invalid

Question

For my Vuejs app I'm using Vee-validate for validation. Currently it's marking valid URLs, like http://localhost:3000, as invalid.

This is happening on their sample also: http://vee-validate.logaretm.com/rules.html#rule-url

If you enter http://localhost:3000 in their sample, you'll see the message The field field is not a valid URL.

Answer 1

After searching, I found some related issues on Vee-validate's Github, but none solved my problem completely. Here's what I had to do to get it to validate localhost URLs:

1. Add the validator package

   npm install validator
   

2. Add a new rule:

   const urlFixRule = (value) => {
       return isURL(value, {
           require_tld: false
       });
   };
   

3. Apply the new rule:

   VeeValidate.Validator.extend('url', urlFixRule);
   

---

How it looks in my js file

import Vue from 'vue';
import isURL from 'validator/lib/isURL';
import VeeValidate from 'vee-validate';
import App from './App';

// Form Validation (https://github.com/baianat/vee-validate)
Vue.use(VeeValidate);

// Temporary Fix for Vee-validate bug, until the next release
const urlFixRule = (value) => {
  return isURL(value, {
    require_tld: false
  });
};
VeeValidate.Validator.extend('url', urlFixRule);

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});