Can someone guide me on how to verify a user's input by comparing it against a predefined set of strings in JavaScript?

Question

Can someone guide me on how to verify a user's input by comparing it against a predefined set of strings in JavaScript?

I am new to JavaScript and still learning, so please bear with me.

I have a unique task of creating multiple voucher codes, each with a specific redeemable amount. When a user purchases a voucher and enters the code in a text field, I need JavaScript to validate the code, confirm the amount redeemed, and display it - similar to how Amazon gift cards work!

All this needs to be implemented in a simple HTML page that I have set up.

As I am just beginning with JS, I have been struggling to figure this out on my own.

For instance, I have several voucher codes stored as strings:

var voucher1 = 'AC60';
var voucher2= 'DC60';
var voucher3= 'RC60';
var voucher4= 'XC60';
var voucher5= 'YC60';
var voucher6= 'WC60';
var voucher7= 'ZC60';

How can I assign a monetary value to each code, validate a user's input, confirm the redeemed amount, and display it, mimicking the process of redeeming Amazon gift cards?

javascript html css

Answer 1

Answer №1

If you're in search of a solution, consider utilizing an Object or a Map. These structures enable you to associate a monetary value with the voucher code through a key-value pair (where the voucher code serves as the key and the monetary value is the value).

An illustration could be demonstrated this way:

// Here is a straightforward object literal consisting of keys and values
const vouchers = {
  AC60: 100,
  DC60: 20,
  RC60: 35,
  XC60: 45,
  YC60: 80,
  WC60: 10,
  ZC60: 200
};

// This function updates the output <div> with the voucher amount 
// or indicates that an unknown voucher was entered
function getVoucherValue(event) {
  const key = input.value;      // Stores the input value
  const value = vouchers[key];  // Searches for the key in the object

  // If the key is valid, update the output <div> with the monetary value
  // Otherwise if the key is undefined, display an error message in the output <div>
  if (vouchers[key]) {
    output.textContent = vouchers[key];
  } else {
    output.textContent = "Invalid voucher"
  }
}

// Whenever the button is clicked, execute the getVoucherValue() function
button.addEventListener("click", getVoucherValue);

<input id="input">
<button id="button">Get Voucher Value</button>
<div id="output"></div>

Answer 2

If you're in search of a solution, consider utilizing an Object or a Map. These structures enable you to associate a monetary value with the voucher code through a key-value pair (where the voucher code serves as the key and the monetary value is the value).

An illustration could be demonstrated this way:

// Here is a straightforward object literal consisting of keys and values
const vouchers = {
  AC60: 100,
  DC60: 20,
  RC60: 35,
  XC60: 45,
  YC60: 80,
  WC60: 10,
  ZC60: 200
};

// This function updates the output <div> with the voucher amount 
// or indicates that an unknown voucher was entered
function getVoucherValue(event) {
  const key = input.value;      // Stores the input value
  const value = vouchers[key];  // Searches for the key in the object

  // If the key is valid, update the output <div> with the monetary value
  // Otherwise if the key is undefined, display an error message in the output <div>
  if (vouchers[key]) {
    output.textContent = vouchers[key];
  } else {
    output.textContent = "Invalid voucher"
  }
}

// Whenever the button is clicked, execute the getVoucherValue() function
button.addEventListener("click", getVoucherValue);

<input id="input">
<button id="button">Get Voucher Value</button>
<div id="output"></div>

Answer 3

Answer №2

It's important to note that relying solely on JavaScript validation is not secure, as the value can easily be manipulated and redeemed at any time. To enhance security, consider creating a more robust structure such as an array with objects:

var myArray = [
     { code: "uniqueVoucher1", value: "10.00" },
     { code: "uniqueVoucher2", value: "20.00" },
 ]

You can then use this array to dynamically generate HTML content like so:

for (var i=0;i<myArray.length;i++){
    document.write("<div>Code: " + myArray[i].code + ", Value: " + myArray[i].value + "</div>")
}

This is just a simple example of how you can implement a more secure voucher system.

Answer 4

It's important to note that relying solely on JavaScript validation is not secure, as the value can easily be manipulated and redeemed at any time. To enhance security, consider creating a more robust structure such as an array with objects:

var myArray = [
     { code: "uniqueVoucher1", value: "10.00" },
     { code: "uniqueVoucher2", value: "20.00" },
 ]

You can then use this array to dynamically generate HTML content like so:

for (var i=0;i<myArray.length;i++){
    document.write("<div>Code: " + myArray[i].code + ", Value: " + myArray[i].value + "</div>")
}

This is just a simple example of how you can implement a more secure voucher system.

Can someone guide me on how to verify a user's input by comparing it against a predefined set of strings in JavaScript?

Answer №1

Answer №2

Similar questions

Is an empty string equivalent to false in a boolean context?

Instructions on transferring a variable from JavaScript to PHP once the form is submitted

A program that removes rows while also decreasing the overall sum

What could be the reason for the 'tsc' command not functioning in the Git Bash terminal but working perfectly in the command prompt?

Utilizing asynchronous functions to assign a JSON dataset to a variable

Executing a function within ng-repeat loop four times in AngularJs

The Node express GET route experiences intermittent failures when using wildcard match for every other request

Utilizing $routeParams to dynamically generate the templateUrl with AngularJS

Entry is automatically added to the form as soon as the page is loaded

Unable to utilize query parameters with an ExpressJS API on localhost

The synchronization between the First Column Scroll and Table Filter Function is out of alignment

Implementing React router for dynamic page rendering

What is the best way to ensure that deck.gl and react-map-gl are displaying properly on my screen?

Ways to determine if a textbox is empty and trigger a popup notification with jQuery

CSS style to choose the row in a bootstrap table with a specific class

Problem with displaying images and videos in a lightbox gallery

Having difficulty performing raycasting on a singular object within a group in three.js to trigger an animation

Resizing rectangular images with CSS/Bootstrap into perfect squares

Guide to creating a synchronous wrapper for jQuery ajax methods

Guide to sorting a JavaScript array using a filter object