The initial value of 0 in a Vue model

I am struggling with setting up a Dutch phone number field in a form. Every time I input the first digit as 0, it disappears when I enter the second digit.

A valid Dutch phone number format can be: 06 + 8 digits (0612345678) or 0 + 2 digits (region code) + 7 digits (012 1234567) or 316 + 8 digits (31612345678).

<el-input
 v-model.number="form.phoneNumber"
 @keypress="isPhoneNumber(form.phoneNumber)"
 :placeholder="$t('phonenumber')"
></el-input>

This is the validator being used:

phoneNumber: [
 {
   required: true,
   type: "text",
   pattern: "^(?:0|(?:\+|00) ?31 ?06 ? )(?:(?:[1-9] ?(?:[0-9] ?){8})|(?:6 ?-? ?[1-9] ?(?:[0-9] ?){7})|(?:[1,2,3,4,5,7,8,9]\d ?-? ?[1-9] ?(?:[0-9] ?){6})|(?:[1,2,3,4,5,7,8,9]\d{2} ?-? ?[1-9] ?(?:[0-9] ?){5}))$",
   message: this.$t("please_fill_a_phonenumber"),
   trigger: "blur",
 },
],

Do you see anything obvious that I might be missing?

Answer №1

To ensure you are using the correct method for input bindings with Vue.js, make sure to refer to the Official Vue.js Docs at How to Form Input Bindings?. It is important to understand how to utilize the v-model directive and its modifiers, especially if you are incorporating the .number modifier. Additionally, explore the Official documentation of Element Library at element.eleme.io to learn about utilizing el-form and el-input elements effectively.

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

Extracting data from the response object and injecting it into the request

Once the file has been successfully uploaded, the 'uploadSuccess' callback event is triggered, providing information about the newly created media. The 'hashed_id' value within this object is crucial for my PUT request. I attempted to ...

Attempting to modify the background hue of a Bootstrap 5 Button using javascript

I've been experimenting with changing the background color of a bootstrap 5 button using JavaScript. While I've been able to successfully change the text color with JavaScript, altering the button's color has proven to be elusive. Below is ...

Counting radio buttons in AngularJS and handling undefined values when passing parameters

After spending countless hours trying to figure out how to count radio buttons, I encountered another issue where the value passed to ng-change would become "undefined". My question is, how can I successfully pass that value? Any assistance with counting o ...

"Troubleshooting tip: encountering a SyntaxError message stating 'import declarations may only appear at top level of a module'? Here's

After downloading fetch-jsonp by running npm i fetch-jsonp and adding its dependency to my package.json, I attempted to import it using the following code at the top of my main.js: import fetchJsonp from 'fetch-jsonp'; However, I kept encounter ...

Storing checkbox values in a MySQL database using PHP

I am working on a project that involves two checkbox filters. My goal is to keep track of the count of checked checkboxes for each filter and store this information in separate columns in a MySQL table. Could someone please assist me in obtaining the coun ...

My messages are falling on deaf ears as the Discord bot remains unresponsive (js)

After creating a Discord bot using node.js and VS Code, I am encountering an issue where the bot appears online but does not respond to messages. Despite ensuring that the bot has all the necessary permissions, I cannot identify the root cause of this prob ...

Dealing with cascading jQuery deferred callsHere are some guidelines on

When I have a function that needs to retrieve data and return a promise, I often find myself making multiple requests one after another. This results in nested deffered calls where the last call resolves on the deferred object that the function ultimatel ...

Slow transition with a gradual appearance and disappearance for the background

I am currently implementing a fading background image effect on my web page, where the current image fades out as the next one fades in. Here is my code: var backgrounds = []; backgrounds[0] = './img/bg.jpg'; backgrounds[1] = '. ...

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

Tips for protecting against modifications to scope objects?

As an Angular newbie, I've encountered a scenario where there is an object in the scope that determines the role of the current user (e.g. user.role=REGULAR). I'm wondering if there's a way to prevent users from using firebug to change user ...

Angular 2 template format standard

Every Angular 2 example I encounter seems to place the template within the component decorator. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Hello world</h1>' }) e ...

Tips for retrieving the chosen value from a dropdown list in HTML

I'm having an issue with exporting specific values from multiple HTML tables into an excel file. My goal is to only export the selected values from each table, with each table being on a separate tab in the excel file. Currently, when I export the ta ...

Finding the count of childNodes within a div using Selenium

I've been grappling with this issue for the majority of today; I'm trying to tally up the number of childNodes within a parent div. It's essentially mimicking a list where each childNode represents a row that I want to count. The HTML struct ...

accessing an array beyond the scope of an AJAX request

I'm struggling to use the data from an array called struct, which I am fetching through ajax. Here is my code: var raw_data = null; $.ajax({ url:path.url_respuesta_leer, async:false, type:"post", dataType:"json", data:{form:id}, success : ...

Enhancing Google Custom Search Engine with Bootstrap3 and CSS3 styling

I'm looking for guidance on how to customize the appearance of a Google Custom Searchbar on my website. Is it feasible to style it using CSS3 and Bootstrap 3 like the example in the image below? Any assistance is greatly appreciated. ...

show a pie chart at the top of the div using highcharts

i am struggling with positioning the high-chart with a label, as seen in the image below https://i.sstatic.net/m9bXW.png does anyone know how to properly display the chart from the top left corner? i have attempted to adjust the settings like this { ...

Guidelines on creating actionable functions using JavaScript

Having trouble connecting the form to the database and looking for a solution. This is the HTML form that I've been working on, attempting both POST and GET methods. <form id="register" action="script/register.js" method="post"> <label for= ...

Issues with endpoints not functioning after importing a NESTJS module

Could someone please explain why the appController is functioning correctly while the itemsController, imported from a module, is not? I have been learning NestJS and followed the documentation as instructed. The appController is working fine with its unc ...

Mobile devices experiencing sluggish performance with Product Spinner

Having trouble pinpointing the source of slow performance on mobile devices for a script that rotates an image when clicked and dragged? On mobile, the rotation is extremely slow compared to desktop. The script has been relocated to its own page due to is ...

Unexpected display of Unicode text retrieved through ajax requests

In my setup, I have both an admin module and a front end module available. Specifically, there is a category section that plays a key role in the functionality. To create categories, I utilize AJAX to send data from a text box to PHP. It's important ...