CODEWITHSUNDEEP
javascriptvue.jsvuejs2vee-validate
Gene Parcellano
Gene Parcellano

Reputation: 6044

Vue Vee-validate marking valid URLs as invalid

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.

Upvotes: 2

Views: 6168

Answers (1)

Gene Parcellano
Gene Parcellano

Reputation: 6044

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 }
});

Upvotes: 6

Related Questions