I have an HTML Input field and I need javascript to check if the input entered into this box is a certain string. Specifically, it has to be a specific Zip code, there are a total of 9 different zip codes, all which are different and in no numerical order. Once the code checks if it is that specific zip code, it returns "Yes", if not, simply no.

I know how to do this with ints, as shown in the code below, but not sure to how to do this with strings. This is my current code, which works with validating an integer between 1-10:

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

I have an HTML Input field and I need javascript to check if the input entered into this box is a certain string. Specifically, it has to be a specific Zip code, there are a total of 9 different zip codes, all which are different and in no numerical order. Once the code checks if it is that specific zip code, it returns "Yes", if not, simply no.

I know how to do this with ints, as shown in the code below, but not sure to how to do this with strings. This is my current code, which works with validating an integer between 1-10:

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

• javascript
• html
• validation
• input

Share Improve this question Follow asked Aug 1, 2017 at 20:44 user3371494user3371494 1322 silver badges66 bronze badges 3

• use parseInt as .value will return it as a string even if its a number – Koushik Chatterjee Commented Aug 1, 2017 at 20:47
• store the valid values in an array and check if value entered is in the array – charlietfl Commented Aug 1, 2017 at 20:48
• If you want to support zip + 4 codes you'll have to do something with strings instead of integers. – James Commented Aug 1, 2017 at 21:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I think you are over-thinking this. You can just use the indexOf function to test your zip code array.

var btn= document.getElementById("btn");
var input = document.getElementById("numb");
var output = document.getElementById("demo"); 
var formArea = document.getElementById("formArea"); 

var zips = ["11111","22222","33333","44444","55555", "e1", "e2"];

btn.addEventListener("click", function() {
    var result = null;

    // indexOf() returns -1 when the supplied value isn't present
    if(zips.indexOf(numb.value.toLowerCase()) > -1){
      result =  "yes";
      
      // Show the form by removing the hidden class
      formArea.classList.remove("hidden");
    } else {
      result = "no";
      // Hide the form by adding the hidden class
      formArea.classList.add("hidden");      
    }
    output.textContent = result;

});

#formArea{
  border:2px double grey;
  width:50%;
  box-shadow:2px 2px 0 #303030;
  height:100px;
  padding:5px;
}

.hidden { 
  display:none; 
}

<input id="numb">

<button type="button" id="btn">Submit</button>

<p id="demo"></p>

<div id="formArea" class="hidden ">
  Your form goes here
</div>

Can you use a regular expression for postal codes? Note this accounts for a set of zip codes that are in string format, but you are wele to create a zip-code regex that can satisfy the set of zip codes you are interested in. And furthermore, if the set is small enough you can probably just enumerate them in a list/set and check if the set contains the input.

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (!isValidZip.test(x)) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

convert it to a number

x = Number(document.getElementById("numb").value);