Streaming live at 10am (PST)

Postal Code Validation

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!

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

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]?

@Stewart_Ramsey

Correct same idea!

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

Beautiful. Love that! Thanks so much!

1 Like

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?

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]

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.

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

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.

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>