How do i validate a users input based on a series of string i have assigned in JavaScript?

Question

I am very new to JavaScript so please bear with me.

So i want to create multiple voucher codes and for each voucher code there is a specific redeemable amount attached to it. And if a user should buy a voucher and after getting the voucher code, inputs it in a textfield, how do i get JavaScript to validate the users voucher code and confirm the amount redeemed and print that out? Just like redeeming Amazon Giftcards!

I want all these done in a simple HTML file i have created.

Since am just starting out JS i can't seem to achieve this yet on my own.

for example i have several voucher codes in strings:

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

How do i attach monetary value for each and validate a users input to confirm which has been redeemed and print out the value just like redeeming amazon giftcards?

Are the voucher codes unique? Are a voucher code linked to a specific user? Do users buy the vouchers? If yes, you shouldn't `hardcode` the voucher codes in the JS for security reasons. — Yann Masoch, Aug 28 '19 at 00:32
Yes the codes are unique but they aren't linked to a specific user... a user has to purchase it. Since its a personal locally hosted project security is not really something of concern rn. — David Herbert, Aug 28 '19 at 00:37

score 1 · Accepted Answer · answered Aug 28 '19 at 00:38

What you're looking for is an Object or a Map. These data structures allow you to attach a monetary value to the voucher code in the form of a key-value pair (where the voucher code is the key and the monetary value is the value).

A simple example could work like this:

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

// This function will update the ouput <div> with the voucher amount
// or indicate an unknown voucher was input
function getVoucherValue(event) {
  const key = input.value;      // Stores the value of the input
  const value = vouchers[key];  // Looks up the key in the object

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

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

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

Thanks! Your code snippet seem to fit what am trying to achieve! — David Herbert, Aug 28 '19 at 00:44

score 0 · Answer 2 · answered Aug 28 '19 at 00:42

First a little note, as really you should not rely on javascript validation, if there is actual value attached to it, it would be far to easy to redeem whatever whenever. Beyond that, yes, possible, so you would really want to start by creating a more "Complex" structure. Like an array, containing objects:

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

Then you can use this array to "loop through" the data, for creating html... perhaps like this...

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

just a small example

How do i validate a users input based on a series of string i have assigned in JavaScript?

2 Answers2