How to check the input string on format?

Question

Use prompts the user to enter a GBLearn ID. You will need to use RegExp inside try & catch block to evaluate whether the id is in a proper format, if not, throw an error to display an alert message to the user in your catch block). As you know, all GBLearn IDs begin with a lowercase letter for each season (w for winter, s for summer...), followed by 7 digits. If user input is in a valid format, create a new h3 element and embed user’s input as a new text node to the h3 element, then append it to the div the container created above (in your HTML document).

I try to check if the inputted text on the required format. If you know how to fix it, I will appreciate it.

"use strict";
let button = document.getElementById("Enter_your_id");

button.addEventListener("click", EnterID, false);

function EnterID() {
  let input = "";
  try {
    input = prompt("Enter your id");

    let regex = new RegExp("/^(w|s)-[0-9]{7}");

    if (input == null) {
      throw new Error("The field can not be empty");
    }

    if (!regex.exec(input)) {
      throw new Error("Incorrect format");
    }
  } finally {
    let text = EnterID();

    let output = document.querySelector("#output h3");

    output.innerHTML = text;
  }
}

user_5424988 · Answer

The are a few notes about your code.

The text to add to the h3 element should be the entered value from the prompt, which is input and not let text = EnterID(); The function does not return anything, and this call might result in recursive infinite looping.
The regex does not need the leading / and can be written as let regex = new RegExp("^[ws]-[0-9]{7}"); (Note that there is a - in the pattern and [ws] is a character class instead of an alternation)
There is no catch in the code, only a finally. So you throw the exception, but will only (every time) run the finally statement.
The code throws an exception and catches it in the same function, but you don't really need to throw an exception. You can also only test for the regex and then set the value for the h3 element or show a message
Using prompt will return null when pressing Cancel, and an empty string when pressing OK without entering text so you could check for both conditions in the code using if (input === null || input === "")

Your updated code might look like

"use strict";
let button = document.getElementById("Enter_your_id");

button.addEventListener("click", EnterID, false);

function EnterID() {
  let input = "";
  try {
    input = prompt("Enter your id");

    let regex = new RegExp("^[ws]-[0-9]{7}");

    if (input === null || input === "") {
      throw new Error("The field can not be empty");
    }

    if (!regex.test(input)) {
      throw new Error("Incorrect format");
    }

    let output = document.querySelector("#output h3");
    output.innerHTML = input;
  } catch (error) {
    alert(error.message);
  }
}

Or for example without try catch

"use strict";
let button = document.getElementById("Enter_your_id");
button.addEventListener("click", EnterID, false);
let regex = new RegExp("^[ws]-[0-9]{7}");

function EnterID() {
  let output = document.querySelector("#output h3");
  let input = prompt("Enter your id");

  if (input === null || input === "") {
    alert("The field can not be empty");
  } else if (!regex.test(input)) {
    alert("Incorrect format");
  } else {
    output.innerHTML = input;
  }
}

How to check the input string on format?

1 Answers