Question

Hello!

I am coding a new HTML form that will collect upon many more items a state abbreviation (i.e. “ks”). Right now I have the -input field- limited so it only allows 2 characters. That doesn’t keep visitors from entering something random into the field like “SS”.

I am wanting a code that allows me to limit what can be placed in that field to only USA’s official state abbreviations.

I am using HTML, CSS, and Javascript so far in my website. Thank you for all your help and ideas!!

Answer 1

Update. Added all states, uppercase handling and jsfiddle link.

Here is a pure javascript implementation, should give you an idea of what you need to do:

<script>
    function validateState(el) {
    //put all states in this array. 
    var states =    ["AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE",
"FL","GA","GU","HI","IA",
"ID","IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT",
"NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","PR","PW","RI",
"SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY"];
    for(var i=0;i< states.length;i++) {
      if(el.value.toUpperCase() == states[i]) {
        return true;
      }
    }
    //clear element if it doesn't match a state
    el.value = ""; //you could maybe do something else here.
    return false;
}
</script>
<input class="up" type="text" maxlength="2" onchange="validateState(this);"/>

See it working live here : http://jsfiddle.net/k7QQs/