How can a verification process be implemented to ensure that the user input matches the provided ID?

I am relatively new to JavaScript, but I will attempt to explain what I am trying to achieve.

Imagine there is an input field where users can add arrays like this:

[users can type any ID, for example: 12345] [button]

purchase IDs: [ ]

However, the current purchase IDs consist of only these 4 arrays.

Purchase IDs: [24149, 24223, 24251, 24253]

Desired Outcome: When the user clicks the button, a check should be performed to confirm if the input ID matches any of the existing purchase IDs. If no match is found, an error message should be displayed to the user.

Question: So, my question is how can I implement a checking method to verify if the user input matches any of the existing purchase IDs?

HTML:

<input type="text" name="test" v-model="text" placeholder="type here"/><v-btn @click="tick()"small color="rgba(10,0,0,0)">click</v-btn><br>

Scripts:

data(){
  return{
   selected: [],
   text:''
  }
},
methods:{
   tick(){
   var array = this.text.split(" ");
   array.forEach((item, index)=>{
   this.selected.push(parseInt(item)) 
  })
   this.text = '';
  },
}

Answer №1

Why the need to separate the input text? Are you allowing users to input more than one ID at a time? If so, you can validate input data by following this approach:

const app = new Vue({
  el: "#app",
  data() {
    return {
      selectedIDs: [],
      userInput: '',
      validIDs: [12345, 67890, 54321]
    }
  },
  methods: {
    validateInput() {
      if (this.validIDs.includes(parseInt(this.userInput)))
        console.log(`ID ${this.userInput} is valid`);
      else
        console.log(`Invalid ID`);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <input type="text" name="test" v-model="userInput" placeholder="Enter ID here" />
  <button @click="validateInput()" small color="rgba(10,0,0,0)">Submit</button><br>
</div>

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

How to utilize the ternary operator efficiently to evaluate multiple conditions in React

Is there a way to change the style based on the route using react router? I want the description route to display in orange when the user is in the description route, white when in the teacher-add-course route, and green for all other routes. However, th ...

Using Jquery to detect if there are any Space characters in the user input

In my form, users are required to set up a new Username. The problem arises when they include a space in their username, which I want to prevent. Currently, I am able to detect the presence of a space with this code: var hasSpace = $('#usernameValue ...

Why do the async functions appear to be uncovered branches in the Jest/Istanbul coverage report?

I am encountering an issue throughout my application: When running Jest test coverage script with Istanbul, I am getting a "branch not covered" message specifically on the async function part of my well covered function. What does this message mean and how ...

The problem with setting headers in Node Express MySQL: Error message indicating headers cannot be set after they have been sent

I'm currently working on a project using Node.js, Express.js, and a MySQL database. I have posts stored in the database that I want to display using the Pug.js view engine. I've managed to connect to the database and render the home route success ...

Difficulty accessing `evt.target.value` with `RaisedButton` in ReactJS Material UI

My goal is to update a state by submitting a value through a button click. Everything works perfectly when using the HTML input element. However, when I switch to the Material UI RaisedButton, the value isn't passed at all. Can someone help me identif ...

The never-ending scrolling problem: Autoscroll refusing to halt - a perplexing conundrum in the world

I'm having an issue with my chat box continuously autoscrolling and not allowing me to scroll up. I know where the problem is, but I'm unsure of how to resolve it. Ideally, I want the chat box to autoscroll while still maintaining the ability to ...

What is the best way to flatten a nested array containing various objects, while extracting values based on the existing property names?

I am seeking a way to flatten a nested array containing different objects and retrieve only the existing values from specific property names within those objects. Specifically, I am interested in extracting all the propertyId values from a nested array co ...

Looking for a rival on socket.io

Currently, I am working on a script utilizing socket.io with express in node.js to find an opponent. In this setup, only two players are allowed in a room. If no free rooms are available, a new one should be created automatically. The core logic of the c ...

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

After attempting to update a MYSQL table, a success message is displayed, but the changes do not actually reflect in the

After receiving a successful AJAX message, the data doesn't seem to update in the database. Can anyone provide assistance? This is the HTML code: <div class="row"> <input type="text" ng-model="updateId" class="form ...

Displaying a slideshow with multiple images - Fotorama 4 offers the ability to slide through

I'm currently utilizing Fotorama.js, which can be found at fotorama.io Is there a way to display more than one image using fotorama.js? I am interested in creating a carousel with this plugin. <div class="fotorama"> <div data-img ...

Stop allowing images to automatically open in the browser when a image file is dropped into Vue

Whenever I attempt to drag the image above the label and release the left mouse button, the files open in my browser. Simply adding prevent is not enough to prevent this default behavior. What additional steps do I need to take? Please note that the layou ...

Stop Carousel when hovering over individual items (Owl Beta 2)

After creating a unique navigation that is separate from the carousel, I encountered some issues with the autoplay feature. Below is the HTML markup: <div class="carousel"> <div class=""> <img src="assets/img/carousel1.jpg" /&g ...

Utilize the jQuery select() function to target and retrieve the elements within a specific div

Is there a way to utilize jQuery's .select() function to establish a selection range that covers all the content within a div? Within my div, I have a mix of labels, inputs, select elements, and various other UI components. I came across some code on ...

Utilize the nest function in D3 to organize flat data with a parent key into a hierarchical structure

I'm searching for an elegant and efficient solution to transform my input data into a hierarchical structure using d3.js nest operator. Here is an example of the input data: [ {id: 1, name: "Peter"}, {id: 2, name: "Paul", manager: 1}, {id: 3, name: " ...

The JavaScript code that functions properly in Codepen is not functioning on my HTML page

Can you help me understand why this code is working fine in CodePen, but not on my HTML page? I'm unable to identify the error that may have occurred. Any assistance would be greatly appreciated! I suspect there's an issue with connecting some jQ ...

Webpack in Vuejs does not have access to the keys defined in dev.env.js file

The framework utilized here is vuejs-webpack, with build and config files located here. No modifications have been made to these files. According to the information on Environment Variables, the keys specified in dev.env.js should be accessible during the ...

Issues with the visibility of inlined styles within the Angular component library

After developing a custom library with components for an Angular 4 application, I encountered an issue where the CSS styling from the components was not being applied when using them in an application. Although the functionality worked fine, the visual asp ...

Transmit JavaScript code from ASP.NET

Trying to transfer JavaScript code built using String Builder on the server-side (ASP.NET) to the HTML page's JavaScript. Here is my approach: Utilizing a Master Page and an ASPX page structured like this: <asp:Content ID="BodyContent" ContentPla ...

The post method's response containing JSON data seems to be stuck in a never

I am currently in the process of developing a website that involves posting an ID from the front end to a PHP file. The post method is designed to return questions based on the ID sent to the backend and queried through the database. Below is the code I ha ...