Encountering an unexpected error with the InvalidCharacterError in IE11 when using VEE Validate in conjunction with Vue.js and babel-p

Encountering an issue in IE11 where I receive an InvalidCharacterError when attempting to validate a form using vee validate in vue.js. It seems like it might be related to a polyfill error, but I'm uncertain. I have tried debugging by removing certain parts of my code, yet the problem persists. Additionally, I have attempted to label errors and explore other solutions without success.

For further reference, you can view the error here: https://i.stack.imgur.com/PyYIn.png

Below is a snippet of the code:

validateBeforeSubmit() {
    this.$validator.validateAll().then(result => {
        if (result) {
            //submit
        }
    })
}

The error specifically occurs upon clicking the submit button.

Edit:

This issue has resurfaced recently. I am already using babel-polyfill and have imported it. Interestingly, other pages utilizing arrow functions and promises work seamlessly in IE11.

javascriptvue.jsinternet-explorer-11vee-validatebabel-polyfill

Answer №1

Internet Explorer 11 does not support arrow functions, so in order to make your code compatible with IE 11, you'll need to polyfill all ES6+ syntax. One way to do this is by using Babel to polyfill the code as shown below:

(void 0).$validator.validateAll().then(function (result) {  
  if (result) {
      //submit
    }
});

You can also check out the accepted answer in this thread for guidance on installing and importing babel-polyfill to ensure compatibility of your Vue.js app with IE 11.

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

The function "process" is not defined within the Vue.js framework

When attempting to utilize process.env.process.env.VUE_APP_SERVER_URL in my Vue project, I encountered the following error: Uncaught ReferenceError: process is not defined This project is built with webpack and executed using the npm start command. ...

vue.jsprocessenvironment-variables

Fill out FormBuilder using data from a service within Angular2

I am working with an Angular2 model that I'm filling with data from a service. My goal is to use this model to update a form (created using FormBuilder) so that users can easily edit the information. Although my current approach works, I encounter er ...

javascriptangulartypescript

Utilizing Page Objects to select dropdown list items in JavaScript for Protractor testing

I'm struggling with a particular issue during my testing process. The task requires selecting an item from a list as part of a form to create a new user. However, the test does not select an item from the list even though Protractor does not report an ...

javascriptangularjsnode.jsprotractorpageobjects

Generating instances using TypeScript generics

Looking to create a factory for instantiating classes with generics. After checking out the TypeScript docs, everything seems to work as expected. Here's a simplified version of how it can be done: class Person { firstName = 'John'; ...

javascriptnode.jstypescriptgenericstypescript-generics

How can communication be established between JavaScript and a .NET app?

I've been developing a help system using HTML, and I want to include clickable links that can trigger commands in a .NET application (such as guiding users through tutorials or workflows). I have explored the TCard() method for HTML help, but it seems ...

.netjavascript

Using local variables from an external HTML file within an AngularJS directive template

Just making sure I am wording my question correctly, but I have not been able to find any information on this specific topic. Imagine I have an AngularJS directive that looks something like this: angular.module( 'example', [] ).directive( ...

javascriptangularjs

Accessing JSON object with Javascript

I've been struggling with this code snippet and despite looking at similar posts, I can't seem to get it right. var obj2 = JSON.parse('{"venue_data": {"venue_id":"25", "description":"Space Cafe", "venue_type ...

javascriptarraysjsondom

Struggling to securely post data to an Express server by hashing passwords with bcrypt?

I'm currently working on developing an API using Express and Sequelize. Specifically, I am writing a function to create a new user where I utilize bcrypt for password hashing. const createNewUser = (data) => { return new Promise(async (resolve, ...

javascriptapiexpresssequelize.jsbcrypt

`<div>` element with a class of "button" that listens for

I've been attempting to use a userscript to automate a button click. Inspecting the element reveals the button code as: <div class="q-w-btn cl"></div> Unfortunately, the button lacks an id attribute, making it difficult for me to select ...

javascripthtmlcss

Execute the cucumber cli programmatically in the index.js file of a node application

Recently, I received an automation framework built in CucumberJS and Node with Selenium. However, the framework is using an outdated version of Cucumber that relies on promises. Wanting to take advantage of the latest synchronous step feature, I decided to ...

javascriptnode.jscucumberbrowser-automationcucumberjs

How can I test for equality with an array item using v-if in Vue.js?

Currently, I am facing a challenge in my Vue.js project where I need to determine if a number is equal to an element within an array. Here is the code snippet that I am working with: <div v-if="someValue != arrayElement"> // </div> I am st ...

javascripttypescriptvue.jsecmascript-6

Issue with executing Mongoose's .save() method

I am facing an issue with a piece of code that is not functioning as expected. My goal is to save a user document after modifying it with an ObjectId by adding it to an array. However, the user.save() function does not seem to execute, as the document rema ...

javascriptnode.jsmongodbmongoose

What is the process of using JavaScript code to read a text file?

Trying to use Google Charts while reading data from a text file. The code in JS is written for this purpose: function readTextFile(file){ var rawFile = new XMLHttpRequest(); rawFile.open("GET", file, false); // using synchronous call var allTe ...

javascriptajaxgoogle-visualization

Can you tell me the Vue 3 counterpart of Vue 2's __vue__?

While exploring the code, I noticed the __vueParentComponent property. It seems like now I need to reference __vueParentComponent.props.x instead of using __vue__.x. Additionally, I am struggling to find a way to access my custom variables that I created ...

vue.jsvuejs3

My type is slipping away with Typescript and text conversion to lowercase

Here is a simplified version of the issue I'm facing: const demo = { aaa: 'aaa', bbb: 'bbb', } const input = 'AAA' console.log(demo[input.toLowerCase()]) Playground While plain JS works fine by converting &apo ...

javascripttypescript

Configuration file included in Node.js package for distribution

Someone recommended incorporating Continuous Integration for a pre-existing application (FrontEnd: Node.js - BackEnd: .Net API). At the moment, the API endpoints are hardwired in the .js files which become minified after being built using webpack. I plan ...

node.jsnpmwebpackvue.js

Ways to showcase angular scope data within a placeholder while avoiding the use of angular expressions

Initially, I utilized angular expressions {{value}} to present values within elements. However, upon noticing that unrevealed expressions continue to display on the front end during loading delays, I switched to using ng-bind. <div> <h1>Hell ...

javascriptangularjs

The terminal does not recognize the nodemon command

My goal is to automate server reloads using nodemon. I have successfully installed it locally and set the start command as nodemon app.js with this code: "scripts": { "start": "nodemon app.js" } Initially, everything was running smoothly. However, ...

javascriptnode.jsnpmservernodemon

Attempting to create a redirection landing page

I have a process where I create a new user and save it in my database with the following code snippet: const newUser = new User({ username: userId, password: pass, nameOfUser: user_name, emailOfUser: user_email ); newUser.save(); res.redir ...

javascriptnode.jsdatabasemongodbexpress

Preventing an iframe from reloading when transferring it to a new parent using appendChild

I'm looking to relocate an iframe to a different parent element while maintaining the iframe's current state (including scroll position and any entered form data). Unfortunately, when I use appendChild() to move the iframe, it reloads and resets ...

javascripthtmliframe