Issue with child component validation in VueJS 2 and vee-validate 3: not functioning as expected

Current vee-validate version: 3.4.5

I have a FormBuilder.vue component that constructs my form inputs schema accordingly. Within this component, I have a custom InputSlugify component and I am looking to implement vee-validate validation for it using the required rule.

The Issue at Hand: Upon focusing on the input field and then moving away, the error message "field is required" is not displayed. However, when utilizing the <b-form-input> component directly (in cases where field.type === 'text'), the validation works as expected.

Any suggestions on how I can successfully apply validation to the custom InputSlugify component?

Appreciate any help in advance!

You can find a functional example on CodeSandbox here:

https://codesandbox.io/s/mystifying-frost-3yidg?file=/src/components/InputSlugify.vue

javascriptvue.jsvuejs2vee-validate

Answer №1

To ensure proper validation with vee-validate, make sure to trigger the blur event from your custom component. This is necessary because wrapping components cannot automatically detect this event unless explicitly emitted.

<custom-input @blur="$emit('blur')" ... />

The built-in custom-input component already emits the blur event, which is why it works seamlessly with vee-validate.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I have a website hosted on Heroku and I am looking to add a blog feature to it. I initially experimented with Butter CMS, but I found it to be too pricey for my budget. Any suggestions on

I currently have a website running on Heroku with React on the front end and Node.Js on the back end. I want to incorporate a blog into the site, but after exploring ButterCMS, I found the pricing starting at $49 to be too steep for my budget. My goal is ...

javascripthtmlnode.jsreactjsheroku

Modify the JavaScript window.navigator

I am attempting to modify window.navigator, but am facing difficulties in doing so: -- [10:40:28.802] window.navigator['buildID']; [10:40:28.811] "20121129162756" -- [10:40:47.225] window.navigator['appCodeName'] = "I want to change it ...

javascriptarraysbrowser

Unexpected issue: Router component in Vuejs not receiving prop after page reload

Lately, I've come across a Vue router issue. Let's consider a scenario where we have a Vue CLI project with an App component structured as follows: <template> <div id="app"> <div class="links"> &l ...

vue.jsvue-componentvue-router

What is the best way to retrieve certain fields from a Firestore database using Next.js?

Is there a way to access a specific field in a document using the user's uid as its name? I am utilizing useAuthState from react-firebase-hooks to retrieve the user's credentials (uid). https://i.sstatic.net/t1xGL.png This code snippet allows me ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?

Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...

javascriptcsscookiesthemeschm

Steps to create a new window using Raphael JS

Is there a way to create a new window in Raphael similar to using "_blank"? ...

javascriptraphaelnew-window

Using BeautifulSoup to Retrieve JPEG from an Image Tag's Src Attribute

Struggling with scraping this webpage for personal use. I am having trouble extracting the thumbnails of each item on the page. Despite being able to see image tags containing the required .jpgs when using "inspect" to view the html DOM, I cannot find the ...

javascriptpythonhtmlweb-scrapingbeautifulsoup

Trouble with a basic array duplication function

function duplicateArray(arr) { var len = arr.length; var dup = new Array(); var j; for (j = 0; j < len; j++) { dup[j] = arr[j]; } console.log(dup); } return; duplicateArray([2, 3, 5]); I appreciate your assistance, There are no errors ...

javascript

Create interactive highcharts graphs using data from a CSV file generated through PHP

I'm having trouble working with Highcharts and csv data. Take a look at this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/ $.getJSON('http://www.highcharts.com/ ...

javascriptphpjquerycsvhighcharts

Guide on using axios in vue.js to interact with the API

I need help with a functionality on my website where users can select a car brand from a list of radio buttons. After selecting a brand, I want to retrieve an array of models from the server and display them on a new page. Can someone guide me on what spec ...

arraysapivue.jsaxiosget-request

There are no connection events being triggered - using Mongoose version 4.7.1 with Express

My current struggle involves establishing a connection from my express app to MongoDB via Mongoose. Despite the simplicity of the setup, which is as basic as it gets: var mongoose = require('mongoose'); mongoose.connect('mongodb://localhos ...

javascriptnode.jsmongodbexpressmongoose

Error Checking in AngularJS Form Submission

According to my form.json file, I have a form that needs validation and a simulated submission. Firstly, I need to address this issue: fnPtr is not a function Next, I want to submit the form to a mocked API endpoint that will return true or false. Can I ...

javascriptangularjsjson

Is it possible to modify variables in the controller when the route is changed?

My application utilizes a template and several views that are dynamically rendered based on their route: popApp.controller('HomeCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) { ...

javascriptangularjs

What is the method to track the number of tspan elements within each span element?

How can I use jQuery to count the tspan elements inside multiple span elements within svg text? var count_tspan = jQuery('span text').children().length; // 4 console.log(count_tspan); <div class="content-inner"> <span id="item-0" cl ...

javascriptjquerydom

What is the method to identify the test case name as passed or failed in Puppeteer?

I am currently working on integrating the puppeteer-jest test framework with TestRail using TestRail API. To accomplish this task, I need to identify which tests have failed and which tests have passed. Despite searching through the official GitHub Reposi ...

javascriptjsonjestjspuppeteer

24-hour countdown tool featuring a visual progress bar

Currently, I am in the process of developing an application aimed at assisting individuals in either forming new habits or breaking old ones. In this application, I am looking to implement a countdown timer that ticks down daily; with the help of this help ...

javascripthtmljquerycsscountdown

"How can I dynamically set the text for a radio button using Reactive Forms? Also, how do I capture the selected radio button value and the question title

If I use a reactive form-array, can I dynamically add 2 questions and 3 or 4 choices? Question 1: How do I set the radio button text dynamically using form-array? Question 2: Now, I'm attempting to retrieve only the selected choice ID corresponding ...

javascriptangularradio-button

What is the most effective way to stop zooming when focusing on form fields on iOS or similar devices when using font sizes of 16px or lower?

It appears that many proposed solutions involve changing the text to 16px or using JavaScript to determine if the phone is an iPhone. However, altering the style may not be the most practical solution and checking for specific devices like iPhones could ...

javascriptioscssinputzooming

What could be causing my node server's REST endpoints to not function properly?

Here is a snippet of my index.js file: var http = require('http'); var express = require('express'); var path = require('path'); var bodyParser = require('body-parser') var app = express(); var currentVideo = &apos ...

javascriptnode.jsrestexpress

Converting a PHP multidimensional array to JavaScript

I'm facing an issue with printing data from a PHP array in a JavaScript function. The current setup is not producing the desired outcome. Here's how the data is being processed in PHP: $daten = array(); $anzahl = array(); $leads = array(); if ($ ...

javascriptphparraysjsonmultidimensional-array