Validate the provided input against the value stored in the JSON file

Currently utilizing BootstrapVue.

I have a scenario where I need to autofill the first b-form-input from a query string. Following that, I am required to enter an ID in another b-form-input and validate if it matches the ID stored in my json file (associated with my Name).

Upon successful validation, I aim for the function validDataAdded: function() to enable a button - this is where I'm encountering a challenge and seeking guidance.

Appreciate your support!

This is my template:

<template>
  <b-card class="mt-5 col-md-6">
    <div class="mt-2">Name</div>
    <b-form-input :disabled="true" v-model="this.Name" :value="this.Name"></b-form-input>
    <div class="mt-4">ID</div>
    <b-form-input type="number"></b-form-input>
    <b-button :disabled="!validDataAdded">Login</b-button>
  </b-card>
</template>

And here is my script:

<script>
export default {
  name: "test",
  data() {
    return {
      data: [
        {
        "Name": "Harry",
        "ID": "1234",
        },
        {
        "Name": "Ron",
        "ID": "4321",
        },
        {
        "Name": "Snape",
        "ID": "1973",
        }
      ]
    };
  },

  methods: {

    validDataAdded: function () {
      return //NEED CODE HERE
    }, 
  },
};
</script>

Answer №1

From what I gather, your variable Name will be present in your template, and if a user enters a number in ``, you want to verify if there is a corresponding pair of that number and Name in your data array. If this is the case, you can try the following:

<b-card class="mt-5 col-md-6">
   <div class="mt-2">Name</div>
   <b-form-input :disabled="true" v-model="this.Name" :value="this.Name"></b-form-input>
   <div class="mt-4">ID</div>
   <b-form-input type="number" v-model="this.Number" @keyup="validDataAdded(this.Name, this.Number)"></b-form-input>
   <b-button :disabled="!disabledButton">Login</b-button>
</b-card>

To implement this, you will need two new variables: disabledButton and Number. The Number will represent the input entered by the user, which can be used in the function validDataAdded. This function has been moved to the

b-form-input type="number"
element so it can be triggered. Initially, the value of disabledButton should be set to false.

Here is an example of how the validDataAdded function could be structured:

validDataAdded(name, number) {
      Object.keys(this.data).forEach(key => {
        if((this.data[key].Name === name) && (this.data[key].ID === number)) {
          this.disabledButton = true;
        }
      });
    }

This function takes the provided name and number, iterates through your data, and verifies if there is a match for both values. If a match is found, the disabledButton is toggled to true.

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 error message "TypeError: Trying to access 'insertBefore' property of null object" is indicating that the

Below is an example of the array I am using: var users = [ { 'id': 1, 'name': 'user name', 'age': 25, ... }, { 'id': 2, 'name': 'user name', 'age': 25, ... } ... ...

JavaScript code for displaying data sequentially one at a time

Hey there, I've developed a function that pulls data from a jsonp file. However, I'm looking to display this data one by one - starting with the vendor's name followed by their policyUrl. If you want to check out the source code, click on t ...

Expert Tips for Sending User Authentication Status using AJAX

I am working on a project that requires sending login status with AJAX. Below is the code I have: <img style="display:none;" src="https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif" onload="show_login_status('Twitter', tru ...

managing a multitude of requests to a node.js api

Recently, I was tasked with creating a straightforward REST API using Node.js and developing a script to populate the database with 10000 elements via API calls. Utilizing the Hapi framework, I set up the server. Interestingly, when sending either a single ...

What is the best way to choose a date and time in a custom format within my React application?

I'm currently developing the front-end of my application using React. I am looking for a way to capture the date and time in the specific format shown in this image. Any suggestions or solutions would be greatly appreciated! ...

javascript href function usage

There's an issue I'm facing when using a link click to update a database field and redirect to another page. Here's the code I have: <a href="#" onclick="<?php $sql="UPDATE MyDB.mytable SET Date = '".da ...

retrieving the smallest and largest values from a date range selector

I have been implementing a date range slider following the guidelines from this resource. I successfully set up the slider according to the documentation, but now I need to retrieve the minimum and maximum values as the slider is being moved. I attempted t ...

Tap twice on Kendo Grid rows in the React Component

I am currently utilizing the React Grid component and I am in search of a solution to trigger a function when a row is double-clicked. While I have found a rowClick function that allows me to select a row or handle an onClick event: <Grid rowClick={e = ...

Unable to conduct end-to-end testing as Nestjs fails to resolve dependencies

I encountered the following error : Nest is unable to resolve dependencies of the ParametrageRepository (?). Please ensure that the argument DataSource at index [0] is available in the TypeOrmModule context. This is my test code : describe("ParametrageC ...

Can one select a radio button without corrupting the data in VUE?

How can I preselect a value for radio buttons created using Vue's List Rendering without having a dataset in the script? Below is the code snippet for a better understanding of my goal: SCRIPT: data() { return { formData: {} //formData st ...

How can a parent component update a child component's prop value in VUE?

I'm facing an issue with managing dynamic props in Vue with TypeScript. Below is my parent component: <script setup lang="ts"> const friends = [ { id: "emanuel", name: "Emanuella e", phone: "08788 ...

Consolidate multiple generic items into a single entry

In my current project, I am structuring the types for a complex javascript module. One of the requirements is to handle multiple types using generics, as shown in the snippet below: export interface ModelState< FetchListPayload, FetchListR ...

Access an HTML page programmatically using JavaScript

Make sure to have a confirmation window pop up before submitting the form, and after confirming submission (by clicking OK), redirect to a confirmation page. Here's an example code snippet: <button type="submit" value="Save" id="Save" onclick="cl ...

Fixing a compilation error when attempting to paste text into a file with Selenium Webdriver

I am new to using Selenium webdrivers and encountering a compilation error with the code below. Can anyone provide some assistance? My goal is to save a message into a file rather than displaying it on the console. testResultFile="C:\&b ...

Exploring protractor and webdriver basics in the context of a non-angular application

Currently, I am in the process of writing end-to-end tests for a non-angular application using Protractor. While there is a wealth of information available on how to achieve this, it appears that there are multiple approaches to consider. This has led me ...

Removing all Null Form Inputs from the Document Object Model upon Submission utilizing JavaScript

I am currently working on a conditional Shopify form that was passed down to me from another developer. The form utilizes JavaScript/Jquery for field validation, ensuring that all mandatory fields are completed before proceeding to the next step. After mak ...

Oops! Looks like there's an issue with the NextJS Custom Carousel bug. The error message reads: ReferenceError: document is not defined and is unable to read properties of undefined (

I have developed a unique carousel component to showcase text testimonials from scratch. The custom carousel utilizes a specialized script, carouselFunction.js, for navigational functionality to cycle through each testimonial. Here is an image of the carou ...

An error was encountered in customizing CKEditor5 in Vue: compilation unsuccessful

I tried to integrate a custom CKEditor5 into my Vue application, but encountered a failed to compile error. I generated the custom build using the online tool provided by CKEditor. Subsequently, I placed the files in a new folder called ckeditor within th ...

To successfully display the data on my ChartJS Line graph, I have to first click on the color legend

I am currently using Chart JS to visualize sensor data retrieved from a firebase firestore database. I've come across an unusual issue where my chart fails to display the data initially >> https://i.sstatic.net/qD6Sd.jpg but after performing two ...

Using AngularJS to encapsulate the JSON response received from the server

Currently, I have a basic CRUD application that is operational. However, I am looking to enhance every response received from the server by adding two additional parameters: 'error' => boolean, 'errorMessage' => string, 'dat ...