Postal Code Validation

Design help Custom code
1

Searched around Webflow forums already but no luck.
Does anyone know a way to implement js or jquery to validate if the input field is a valid postal code?

Also side note for emails we are allowed to enter example@example and this is a valid email as well.

Your help is appreciated!

1 Like
2

Solved:

  1. Input Settings
  2. Make Required
  3. Under Custom attributes we are going to add two attributes

minlength = 6
maxlength = 7
pattern = [a-zA-Z][0-9][a-zA-Z](-| |)[0-9][a-zA-Z][0-9]

Note this is for the Canadian Postal Code

3

Hey Noslenc,

Would I be correct in assuming for USA postal code verification it’s easy as removing/replacing with the following?

  1. Input Settings
  2. Make Required
  3. Under Custom attributes, we are going to add two attributes

minlength = 5
pattern = [0-9][0-9][0-9][0-9][0-9][0-9]?

4

@Stewart_Ramsey

Correct same idea!

You can even shorten that to the below:
pattern = [0-9]{5}

5

Beautiful. Love that! Thanks so much!

1 Like
6

Hi, thank you so much for the above advice. I was wondering if it is possible to validate against a list of options?

I have a list of postcodes I would like to validate against (to allow only customers in a certain area to be able to order for delivery), is this possible?

7

Do you have a list you don’t mind sharing?

For Example
M5V 3L9

To limit it to only be M5V the 3 beginning values would follow this below:
[mM][5][vV]

8

The list has thousands of postcodes, here’s just a sample:

AB10 1JN,AB10 1JP,AB10 1JG,AB10 1JF,AB10 1JZ,AB10 1JH,AB10 1JT,AB10 1LB,AB10 1HP,AB10 1JE,AB10 1HF,AB10 1JQ,AB10 1JJ,AB10 1QR,AB10 1JR,AB10 1JS,AB10 1JL,AB10 1JX,AB11 6BH,AB10 1GF,AB10 1JD,AB10 1HH,AB10 1HE,AB11 6PE,AB11 6BD,AB10 1FR,AB10 1FE,AB10 1BU,AB10 1HW,AB10 1BF,AB11 6NY,AB10 1WD,AB10 1BB,AB11 6BG,AB11 5NX,AB11 6NL,AB10 1FQ,AB11 6NZ,AB11 6NR,AB11 5PA,AB11 6NQ,AB10 1AW,AB10 1WR,AB25 1UH

The issue is that it’s a unique list of postcodes, so while AB10 1JN is allowed, AB10 1TR isn’t. So I can’t really narrow it down like this.

9

Hey Daniel, did you find a solution to the pattern issue?

10

If your data follows an actual pattern then yes you can use the technique above, however if you have the same issue as me where some postcodes would fit the pattern but aren’t on the OK list, then you can’t use this technique and I didn’t manage to solve this problem unfortunately. Instead I went a completely different direction and had a Google map with a radius displayed etc.

11

Thanks for the update,

I tried to simplyfy things with the following code but no luck, we basically want to accept any postcode that includes the first 3 characters, if anyone has a quick fix for this, it would be greatly appreciated!

<script>
const field = document.getElementById('input')
const form = document.getElementById('checkout-form')
const button = document.getElementById('submit')

field.value = 'input'

field.addEventListener('input', function() {
  if (field.value.includes('EC1A', 'EC1M', 'EC1N', 'EC1P', 'EC1R', 'EC1V', 'EC1Y', 'EC2A', 'EC2M', 'EC2N', 'EC2P', 'EC2R', 'EC2V', 'EC2Y', 'EC3A', 'EC3M', 'EC3N', 'EC3P', 'EC3R', 'EC3V', 'EC4A', 'EC4M', 'EC4N', 'EC4P', 'EC4R', 'EC4V', 'EC4Y', 'EC50', 'N1', 'N15', 'N19', 'N1C', 'N1P', 'N4', 'N5', 'N6', 'N7', 'NW1', 'NW1W', 'NW26', 'NW3', 'NW5', 'NW6', 'NW8', 'W1', 'W1A', 'W1B', 'W1C', 'W1D', 'W1F', 'W1G', 'W1H', 'W1J', 'W1K', 'W1M', 'W1N', 'W1P', 'W1R', 'W1S', 'W1T', 'W1U', 'W1V', 'W1W', 'W1Y', 'W3', 'WC1A', 'WC1B', 'WC1E', 'WC1H', 'WC1N', 'WC1R', 'WC1V', 'WC1X', 'WC2A', 'WC2B', 'WC2E', 'WC2H', 'WC2N', 'WC2R', 'WC99'
)) {
    message.style.display = "none"
    button.style.backgroundColor = "green"
    button.style.color = "white"
    button.disabled = false
  } else {
  	message.style.display = "block"
    message.innerHTML = "Sorry we're not currently delivering to your location."
    button.style.backgroundColor = "gray"
    button.disabled = true
    button.style.color = "darkgray"
  }
})

</script>
12

Hey Harry, This would work however Webflow caps your character count at a 10k number. With thousands of Zips that cancels out that possibility. I’m running into that issue right now. Any idea on how to put that list of zips whether a google sheet or something and pull to validate in that way?