JavaScript jump to label

Question

I'm trying to make a function that validates user input and return true if there are no mistakes or false (and display a message) if there is a problem.

If an error found, there is no need to check other inputs, just jump to the end of the function to set and format the error

.

let ValidateInput = function() {

  let errorMessage = "";

  if (input1 == "") {
    errorMessage = "Something";
    continue exithere;
  }

  if (input2 == "") {
    errorMessage = "Something else";
    continue exithere;
  }

  exithere:
  if (errorMessage != "") {
    //Display error
    //Change error <p>'s format by adding classlist
  }
}

Using continue or break shows the error "Jump target cannot cross function boundary .ts(1107)", but my label (exithere:) is inside the function...

I know I can use "return false;" at the end of each if, but I prefer to have only 1 exit point from my function where I can display and format the message just one time, and not at the end of each if statement.

Using break ended with the same error.

Why not refactor the "display error" part to be its own function? Or better: Why not use a try-catch, then throw an error in the if blocks and display that error in the catch block? — Oskar Grosser, Mar 30 '23 at 21:44
I don't think throwing an error is better than simply calling a function; there is overhead to throwing an error. — Heretic Monkey, Mar 30 '23 at 22:00
Does this answer your question? [How can I use goto in Javascript?](https://stackoverflow.com/questions/9751207/how-can-i-use-goto-in-javascript) — Heretic Monkey, Mar 30 '23 at 22:03

score 1 · Accepted Answer · answered Mar 30 '23 at 21:38

1

You could wrap the whole block of code in a do...while that executes only once and use break to go to the end. But this is much less readable than just returning on invalid input.

let errorMessage = "";
do {
  if (input1 == "") {
    errorMessage = "Something";
    break;
  }

  if (input2 == "") {
    errorMessage = "Something else";
    break;
  }
} while (0);
// break goes to here

answered Mar 30 '23 at 21:38

Unmitigated

76,500
11
62
80

Nice idea, I should have thought about it :D – bbProg Mar 30 '23 at 21:50
The reason I don't want to just returning on invalid input are: 1. The more inputs there are, the longer the code is. 2. Every change or addition, in this case to the
classlist, will have to be done for each input (inside each if statement). By having just one exit point, I can format the error message just once and changing or adding to the format will be done just once in one place :)
– bbProg Mar 30 '23 at 22:01

imvain2 · Answer 2 · 2023-03-30T21:56:30.783

Another option is looping through each input in a for loop and checking if the value is empty. And adding a data-error attribute to each input field. Then if the value is empty just grabbing that error and breaking the for loop. This will allow you to have dynamic number of fields without having to add more and more to your javascript.

let validateInput = function() {

  let validate = document.querySelectorAll(".validate");

  let err = "";

  for(let z = 0;z<=validate.length-1;z++){
    let fld = validate[z];
    if(fld.value == ""){
       err = fld.dataset.error;
       break;
    }
}

  if (err != "") {
    err = "Fancy Error: " + err;
  }
  
  return err;

}

document.querySelector("button").addEventListener("click",(e) => {
  console.log(validateInput());
});

<input type="text" class="validate" data-error="Please enter in your name">
<input type="text" class="validate" data-error="Please enter in your Phone">
<input type="text" class="validate" data-error="Please enter in your Address">
<hr>
<button>VALIDATE</button>

True, but the more inputs you have, the more complicated and less readable and debug-friendly the code is. — bbProg, Mar 30 '23 at 21:45
@bbProg I know you accepted an answer that still has the same problem with less readable if statements the more you add. So I did update my answer so your javascript won't have to change no matter how many inputs you use as it loops through the existing inputs and you just add a data attribute to each. — imvain2, Mar 30 '23 at 21:57

JavaScript jump to label

2 Answers2