Javascript check if input is a specific string

Question

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>

use parseInt as .value will return it as a string even if its a number — Koushik Chatterjee
– 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
– 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
– James, Commented Aug 1, 2017 at 21:14

Scott Marcus · Accepted Answer · 2017-08-02 23:31:20Z

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>

edited Aug 2, 2017 at 23:31

answered Aug 1, 2017 at 20:49

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3371494 Over a year ago

this works, except they're post codes so like one of them is "E1". When I enter "E1", it works, but "e1" doesn't work. How do I make this so it doesn't matter if upper or lowercase, the value is validated regardless?

Scott Marcus Over a year ago

@user3371494 To treat sings as case-insensitive, just use the .toLowerCase() method on the string being compared and make sure that the stored string in your array, contains lower cased values. I'll update the answer to show this.

user3371494 Over a year ago

awesome, greatly appreciated. I just had one more thing if you could help me with. I have a contact form that I want to appear if any of those postcodes are entered. How would I go about hiding that until one of the postcodes are hit?

Scott Marcus Over a year ago

@user3371494 Also simple enough. You just have the form set up ahead of time with a CSS class that hides it by default. Then, in the same section of the code where you determine a code match, you remove that class. I will again update the answer to show this. Don't forget to mark as "the" answer.

Tr1gZer0 · Accepted Answer · 2017-08-01 20:50:37Z

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 welcome 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>

jemiloii · Accepted Answer · 2017-08-01 20:51:14Z

0

convert it to a number

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

answered Aug 1, 2017 at 20:51

jemiloii

25.9k9 gold badges58 silver badges89 bronze badges

Collectives™ on Stack Overflow

Javascript check if input is a specific string

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related