Javascript limit input to specific numbers

Question

I wanted to create an input field for a postal code check, i found number ranges to not work, as they arent all sequential:

In Dresden one postal code is 01157 but the next one is 01169, so a simple range won't do.

Is it possible to have all the necessary zip codes stored and to then compare if the input is one of these and if yes, then it will be valid?

Yes, [here is a list of Postleitzahlen](https://www.wiwald.com/ds/kostenlose-liste-deutscher-postleitzahlen-und-zugehoeriger-orte/id/ww-german-postal-codes), you can check the input against them — Luca Kiebel, Jan 31 '22 at 13:39
@LucaKiebel Thanks for that link! How would this be implemented in theory? I have no clue about this — StabilerGott, Jan 31 '22 at 13:44
Do you want your users to see the available zip codes? Or do you just want to highlight, if the provided input is valid? — gru, Jan 31 '22 at 13:46
@gru I guess listing all available ones would look like ass, so i guess just validating it would be the better choice. — StabilerGott, Jan 31 '22 at 13:48
Get that list into a JS Array, put an onchange listener on the input field and check if the input.value is in the Array, if not, show some warning — Luca Kiebel, Jan 31 '22 at 13:49
Not necessarily would it look odd, you could use autocomplete components like that one from Bootstrap: https://mdbootstrap.com/docs/b4/jquery/forms/autocomplete/ — gru, Jan 31 '22 at 13:49
@LucaKiebel Thanks for the tip, I just have no clue how to do any of that. — StabilerGott, Jan 31 '22 at 13:54
@gru How would I go about implementing that? I would like to understand how the hmtl code knows which file it would go into to compare against. — StabilerGott, Jan 31 '22 at 14:06
So are you asking about a plain solution without bootstrap or other UI libraries? — gru, Jan 31 '22 at 14:32
@gru Im quite limited by what i can implement as this is running on a shopify site, so the less extra things necessary the better — StabilerGott, Jan 31 '22 at 14:38

score 0 · Accepted Answer · answered Jan 31 '22 at 14:51

0

So here is a minimal solution for a basic understanding of how this works in principle.

I'm using an event listener, so whenever the input value changes, a check is done. If the provided value is included in the list of valid numbers, the input is colored green, otherwise red.

The submit button is only enabled if a valid input was provided.

const plzList = [1, 4, 9, 185, 2164]

const plzInput = document.getElementById('plzInput')
const submit = document.getElementById('submit')

plzInput.addEventListener('input', e => {
  const plzProvided = e.target.value
  const isValid = plzList && plzList.includes(parseInt(plzProvided))
  e.target.style.backgroundColor = isValid ? 'green' : 'red'
  submit.disabled = !isValid;
});

<input id="plzInput" type="number" />
<input id="submit" type="submit" disabled/>

answered Jan 31 '22 at 14:51

gru

2,319
6
24
39

First of all thank you so much for your effort! Just to be sure the top one is the js and the bottom is html and i would just have to call the js file in the html header, correct? – StabilerGott Jan 31 '22 at 15:08
Yes, exactly. Feel free to use this as a starting point for your use case, but I would recommend you to get a general intro on JS & HTML, like this one: https://www.w3schools.com/js/js_intro.asp – gru Jan 31 '22 at 15:17
So, how would one go about to display a colored text if valid or invalid instead of the colored textbox? – StabilerGott Jan 31 '22 at 15:27

Javascript limit input to specific numbers

1 Answers1