Validating a zipcode input with javascript

Question

I am working on an input component that takes the zipcode input and allows numbers only with a max length of 5 characters. I have that working fine, but now I am also trying to validate that zip code as well. I am using the following pieces of code:

  const onChangeInput = (fieldName, e) => {
    setValidate(false);

    const newHomeAddress = homeAddress;

    newHomeAddress[fieldName] = e.target.value;
    if (fieldName === "phone")
      newHomeAddress[fieldName] = e.target.value.replace(/\D/g, "");
    if (fieldName === "zipCode")
      newHomeAddress[fieldName] = e.target.value.replace(/\D/g, "");

    setHomeAddress({
      ...newHomeAddress,
    });
  };

  const isValidUSZip = (n) => {
    return /^\d{5}(-\d{4})?$/.test(n);
  };

and...

<div className="form-field">
  <Input
    label="Zip code"
    placeholder="Zip code"
    onChange={(e) => onChangeInput("zipCode", e)}
    value={homeAddress.zipCode}
    error={validate && homeAddress.zipCode === ""}
    errorLabel="Zip code is not valid"
    maxlength="5"
  />
</div>

I am trying to figure out how i can make sure that fieldName "zipCode" validates through isValidUSZip as well. Any input would be appreciated.

can't you use an HTML input type number? In case you can't why don't you use an HTML input type text with regular expression validation. — user2560539
– user2560539, Commented Nov 12, 2020 at 18:27
I guess I am not exactly sure how to do that. I have to use this Input component for the React project. How would I "use an HTML input type text with regular expression validation" on this example? — bk___
– bk___, Commented Nov 12, 2020 at 18:34
Your onChangeInput() function needs to call isValidUSZip(e.target.value) and use the result to indicate whether the field is valid, probably by setting validate to false. — kmoser
– kmoser, Commented Nov 12, 2020 at 18:34
in your <Input> element can you add this attribute pattern? — user2560539
– user2560539, Commented Nov 12, 2020 at 18:42

user2560539 · Accepted Answer · 2020-11-12 18:45:30Z

1

Try to see if you could add something like this in your <Input element.

<div className="form-field">
  <Input
    label="Zip code"
    placeholder="Zip code"
    onChange={(e) => onChangeInput("zipCode", e)}
    value={homeAddress.zipCode}
    error={validate && homeAddress.zipCode === ""}
    errorLabel="Zip code is not valid"
    pattern="[\d]{3}" // accept only 3-digit numbers in this example
    maxlength="5"
  />
</div>

answered Nov 12, 2020 at 18:45

user2560539

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

Comments

Memorabilien · Accepted Answer · 2022-11-10 21:38:31Z

0

I faced the same problem. But not every 5 digit number is also a zip code. Therefore I made/generated a really long regular expression. Although long, the actual storage space they take up is quite small and it's impressively fast.

This although it is county specific and as of now I only made these countries: US, CH, AT and Germany. If you need another country please let me know.

You can find all of them in this Repository

answered Nov 10, 2022 at 21:38

Memorabilien

12 bronze badges

1 Comment

Pedro Gabriel Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

Validating a zipcode input with javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related