During the development of my Vuejs application, I have implemented Vee-validate for validation purposes. However, there seems to be an issue where valid URLs such as http://localhost:3000 are being marked as invalid.
This problem can also be observed on their sample page:
If you input http://localhost:3000 into their sample, you will receive the error message
The field field is not a valid URL.After doing some research, I came across a few relevant issues on Vee-validate's Github page, but unfortunately, none of them provided a complete solution to my problem. Here are the steps I took to successfully validate localhost URLs:
Install the validator package
npm install validator
Create a new rule:
const urlFixRule = (value) => {
return isURL(value, {
require_tld: false
});
};
Implement the new rule:
VeeValidate.Validator.extend('url', urlFixRule);
This is how it appears in my JavaScript 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 }
});
Learning the ropes of vue.js, I am working with two separate vue files: First file: import second from second.vue; export default{ component: {second}, data() {return{ data: 'data', }} methods: { function f1{ console.log(t ...
console.log('Begin'); const executeAsync = async () => { for(let i=0; i<10000000000000; i++){} console.log('After loop'); } executeAsync(); console.log('finish'); I am looking for asynchronous behavior using async/a ...
When updating a JSON file with a lowdb request, only the date gets updated. Upon logging the information to be updated, this is the desired update: res.on("end", function () { let body = Buffer.concat(chunks); let final = JSON.parse ...
After integrating react styleguidist into my project, I encountered an issue when running npm run styleguidist. The error message states: ReferenceError: process is not defined Here is a snippet from my styleguide.config.js file: module.exports = { ti ...
Imagine a scenario where I and my 3 friends are accessing the same website from different computers simultaneously. Each of us has a profile stored in an array like this: $scope.profilesRanking = [ {name:"Bob", score: 3000}, {name:"John", score: 2 ...
Initially, I envisioned my small 'ship' with turrets that could track a target. This is the jfiddle I created to showcase it. You can view it here. However, when the turrets track, they behave strangely. I noticed that the turret seems to believe ...
Looking for advice on how to loop through a Serialized JSON string using an ajax call in JavaScript. I have 8 labels set up and want to assign each key and value from the JSON string to a different label. Any guidance or feedback is appreciated! I'm ...
I am facing an issue where the Apollo cache is not updating automatically after a mutation. I do not want to manually access the cache using writeQuery and readQuery methods. The update method with readQuery and writeQuery was updating the cache, but it ...
I am currently experimenting with ES6 modules and Vue.js, specifically single file components (SFC). To create my project, I utilized the Vue CLI with the webpack-simple template. I encountered an error that says "TypeError: Cannot read property 'name ...
Doc - const array = [ { user: new ObjectId("627913922ae9a8cb7a368326"), name: 'Name1', balance: 0, _id: new ObjectId("627913a92ae9a8cb7a36832e") }, { user: new ObjectId("6278b20657cadb3b9a62a50e"), name: 'Name ...
When executing the function, it creates a series of files but fails to write data to them. Strangely, omitting Promise.all at the end and not resolving the function actually results in the data being written to the files. It's puzzling that no matter ...
After reading through this discussion, I have found that in order to resolve an issue, I need to utilize a newer version of ui-bootstrap-tpls.js. However, the downside is that this disables the functionality of bootstrap pagination, which only works with a ...
I'm a beginner to React JS and I've been learning by working on a project. I was creating a basic e-commerce UI with items and attempting to add items to a cart, but encountered an issue. The React Hook "useStateValue" is being called in the fun ...
Currently working on building a visual representation of a tree/hierarchy data structure using d3.js v4 within an Angular environment. I've taken inspiration from this particular implementation https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5e ...
I am currently developing an extension for VS Code that will enhance Skript syntax support. One challenge I am facing is the inability to select the body of the code block. Skript syntax includes various blocks such as commands, functions, and events, eac ...
There are multiple links listed below: <a href="http://www.google.com" id="link01">Google</a> <a href="http://www.yahoo.com" id="link02">Yahoo</a> <a href="http://www.cnn.com" id="link03">CNN</a> <a href="http://www. ...
When using NavLink for Routing and showing the active item of selected items, I am facing an issue where the home item is always shown as active even when switching to other items. This problem does not occur with items other than home. Can someone help m ...
It's common knowledge that when we run npm run build, React scripts utilize Webpack to create a bundle by examining the entire dependency graph (following imports) and generating a bundle.js which is then stored in the dist/build folder for production ...
Is there a way to obtain the dimensions and position of an element using Element.getBoundingClientRect(), but without taking into consideration any transformations applied through the CSS property transform? I am looking for a method that provides the rect ...
I've implemented the code below to ensure that the blue area in image 1 remains non-scrollable when there is sufficient space, but becomes scrollable when space is limited. However, I'm facing an issue where the ScrollView component is adding ext ...