How to stop javascript loop once match is found in array

Question

I tried finding some fixes, but don't seem to be finding what I'm looking for. Maybe its my wording.

So I have this form that once it submits with a 5 digit zip code it checks an array for a matching value, once its matches I want it to show a success message and if It doesn't match then return No match, but currently it returns the message as many time as the array has. I'm still fairly new to JavaScript so any help would be greatly appreciated. Thanks in Advance!

JavaScript:

<script>
function getZip(e) {
    e.preventDefault();
    var zip = document.getElementById('zip').value; // Gets the value from the text field "zip" on the form.
    var result = ["48650", "48611", "48746", "48614", "48706"];

    for (var i = 0; i < result.length; i++) {
        //console.log(result[i]);

        //if (zip.length == 5 && zip == result[i]){
        if (zip == result[i]) {
            console.log(zip + " is = to " + result[i]);
            alert('Match ' + zip);

        } else if (result[i] != zip) {
            alert("No Match1");
            console.log(zip + " is != to " + result[i]);

        } else {
            alert("No Match2");
            console.log(zip + " is != to " + result[i]);
        }
        //return false;
    }
    if (zip === "") { // Checks if the text field "zip" is empty, if so it returns an error message.
        alert('Please enter a zip code!');

    } else if (zip.length > 5) {
        alert("Please enter a valid 5 digit numeric zip code.");

    } else if (zip.length < 5) {
        alert("Please enter a valid 5 digit numeric zip code.");

    } else if (isNaN(zip)) { // Checks if the text field "zip" for alphabetic characters. The "isNaN" function is to determine if a value does not convert to a number, if so it returns an error message.
        alert("Please enter a numeric value.");
    }
}
</script>

Form:

<div class="searchZip">
    <p>Please enter your zip code for availability</p>
    <form>
        <input type="text" name="zip" id="zip" placeholder="Zip Code">
        <button onclick="getZip(event);">Check</button>
    </form>
    <p id="display"></p>
</div>

Solution 1

As others have said, you could use break to exit out of the loop.

I would not use a loop though. Instead, I would use the .some function to determine if there is a match:

function getZip(e) {
  e.preventDefault();
  var zip = document.getElementById('zip').value; // Gets the value from the text field "zip" on the form.
  var result = ["48650", "48611", "48746", "48614", "48706"];

  if (zip === "") { // Checks if the text field "zip" is empty, if so it returns an error message.
    alert('Please enter a zip code!');

  } else if (zip.length > 5) {
    alert("Please enter a valid 5 digit numeric zip code.");

  } else if (zip.length < 5) {
    alert("Please enter a valid 5 digit numeric zip code.");

  } else if (isNaN(zip)) { // Checks if the text field "zip" for alphabetic characters. The "isNaN" function is to determine if a value does not convert to a number, if so it returns an error message. 
    alert("Please enter a numeric value.");
  } else {
    var match = result.some(function(r) {
      return zip === r;
    });

    if (match) {
      alert('Match ' + match);
    } else {
      alert("No Match");
    }
  }
}

<div class="searchZip">
  <p>Please enter your zip code for availability</p>
  <form>
    <input type="text" name="zip" id="zip" placeholder="Zip Code">
    <button onclick="getZip(event);">Check</button>
  </form>
  <p id="display"></p>
</div>

Or, you could use indexOf for a simple match like yours.

Solution 2

Use break to break out of loop.

In your case there's no need of for, use Array#indexOf to check if the array contain an element.

You can also use HTML5 pattern attribute with regex [1-9][0-9]{4}.

var result = ["48650", "48611", "48746", "48614", "48706"],
  display = document.getElementById('display');

function getZip(e) {
  e.preventDefault();
  var zip = document.getElementById('zip').value,
    message = '',
    className = 'valid';

  // Remove classes
  display.classList.remove('valid')
  display.classList.remove('invalid');

  // Check if entered valid zipcode
  if (/^[1-9][0-9]{4}$/.test(zip) === false) {
    message = 'Please enter valid 5 digit zip code';
    className = 'invalid';
  } else {
    var index = result.indexOf(zip);

    if (index > -1) {
      message = 'Zip ' + zip + ' found at index ' + index;
    } else {
      message = 'Zip not found in array';
    }
  }

  // Show message
  display.innerHTML = message;
  display.classList.add(className);
}

#zip:invalid,
.invalid {
  color: red;
}
.valid {
  color: green;
}

<div class="searchZip">
  <p>Please enter your zip code for availability</p>
  <form>
    <input type="text" name="zip" id="zip" placeholder="Zip Code" pattern="[1-9][0-9]{4}">
    <button onclick="getZip(event);">Check</button>
  </form>
  <p id="display"></p>
</div>

Solution 3

The algorithm can be even easier

function getZip(e){
e.preventDefault();
var zip = document.getElementById('zip').value; // Gets the value from the text field "zip" on the form.
var result = ["48650","48611","48746","48614","48706"];

        if (result.indexOf(zip) === -1){
          alert("No Match1");
        } else {
          alert('Match ' + zip);
        }
   
  if (zip === "") { // Checks if the text field "zip" is empty, if so it returns an error message.
    alert('Please enter a zip code!');

  } else if (zip.length > 5) {
    alert("Please enter a valid 5 digit numeric zip code.");

  } else if (zip.length < 5) {
    alert("Please enter a valid 5 digit numeric zip code.");

  } else if (isNaN(zip))  { // Checks if the text field "zip" for alphabetic characters. The "isNaN" function is to determine if a value does not convert to a number, if so it returns an error message. 
    alert("Please enter a numeric value.");
  }
}

<div class="searchZip">
  <p>Please enter your zip code for availability</p>
     <form>
        <input type="text" name="zip" id="zip" placeholder="Zip Code">
           <button onclick="getZip(event);">Check</button>
     </form>
     <p id="display"></p>
</div>

Solution 4

Put break in the condition branch body

function getZip(e){
e.preventDefault();
var zip = document.getElementById('zip').value; // Gets the value from the text field "zip" on the form.
var result = ["48650","48611","48746","48614","48706"];

  for (var i=0; i<result.length; i++){
    //console.log(result[i]);

      //if (zip.length == 5 && zip == result[i]){
        if (zip == result[i]){
          console.log(zip + " is = to " + result[i]);
          alert('Match ' + zip);
          break;

        } else if (result[i] != zip) {
        alert("No Match1");
        console.log(zip + " is != to " + result[i]);
          break;

        } else {
        alert("No Match2");
        console.log(zip + " is != to " + result[i]);
          break;
      }
        //return false;
  }
  if (zip === "") { // Checks if the text field "zip" is empty, if so it returns an error message.
    alert('Please enter a zip code!');

  } else if (zip.length > 5) {
    alert("Please enter a valid 5 digit numeric zip code.");

  } else if (zip.length < 5) {
    alert("Please enter a valid 5 digit numeric zip code.");

  } else if (isNaN(zip))  { // Checks if the text field "zip" for alphabetic characters. The "isNaN" function is to determine if a value does not convert to a number, if so it returns an error message. 
    alert("Please enter a numeric value.");
  }
}

<div class="searchZip">
  <p>Please enter your zip code for availability</p>
     <form>
        <input type="text" name="zip" id="zip" placeholder="Zip Code">
           <button onclick="getZip(event);">Check</button>
     </form>
     <p id="display"></p>
</div>

View more solutions