Question

Postal Code Mask

Forms Version 11

Updated July 9, 2024

asked on May 3, 2024

Hi everyone,

I have a Single Line Field, I am trying to achieve dual behaviour using the inline javascript. I want the field to behave as a US Postal Code, if no alphabet characters detected, but if there are characters detected more than 2 than it to act as a Canadian Postal code with and it to mask too. Here is the code I am using.

Would appreciate your help on this. Thank you!


function formatPostalCode(postalCodeInput) {
  const cleanedInput = postalCodeInput.replace(/\W/g,'');
  
  if (/^\d+$/.test(cleanedInput === 5)
      {
      return cleanedInput;
      }
  else{
    return 'Invalid US Code'
  }
  else{
    if (/^[A-Za-z0-9]{6}$/.test(cleanedInput)){
      return cleanedInput.substring(0,3)+ ' ' + cleanedInput.substring(0,6);
    }else{
      return 'Invalid Canadian postal code';
    }
}
}

LFForm.onFieldBlur(function(){ LFForm.setFieldValues({fieldId: 261}, formatPostalCode(LFForm.getFieldValues({fieldId: 261}))) }, {fieldId: 261})

0 0

Replies

replied on May 6, 2024

It is also worth noting that the new form designer has masking/pattern validation built in to single line fields. With that and custom error messages you should be able to do what you are doing in code here completely out of the box.

4 0

replied on May 24, 2024

Thanks it worked

0 0

replied on July 9, 2024

The reason I'm still going with using JavaScript to do masking is that with the built in masking, I'm not a fan of needing to put in spaces for optional values as well. I have phone numbers with optional extensions and it does not seem intuitive for the users to need to add in extra spaces so that the field does not throw an error.

(000) 000-0000 Ext. 999999

0 0

replied on May 3, 2024 • Show version history

I haven't fully tested your code, just a couple syntax errors I notice initially:

You're missing a closing parenthesis in line 5.

I don't believe the regex .test() function will evaluate as 5 in line 5, so I don't think that will ever evaluate as true.

And line 8 needs to be an else if statement. As it is written, you have two else statements, which isn't allowed.

EDIT TO ADD: Okay, I threw together a quick test, and tweaked the code as follows:

function formatPostalCode(postalCodeInput) {
  const cleanedInput = postalCodeInput.replace(/\W/g,'');
  
  if (/^\d{5}$/.test(cleanedInput))
      {
      return cleanedInput;
      }
  else if (/^\d+$/.test(cleanedInput)) {
    return 'Invalid US Code'
  }
  else{
    if (/^[A-Za-z0-9]{6}$/.test(cleanedInput)){
      return cleanedInput.substring(0,3)+ ' ' + cleanedInput.substring(0,6);
    }else{
      return 'Invalid Canadian postal code';
    }
}
}

LFForm.onFieldBlur(function(){ LFForm.setFieldValues({fieldId: 261}, formatPostalCode(LFForm.getFieldValues({fieldId: 261}))) }, {fieldId: 261})

I'm not certain if the two substrings you have with the Canadian code are working the way you want, it was repeating some of the input for me when I tried that, and I don't know if that was intentional or not (I don't personally have experience with Canadian postal codes).

But the way this is working is if it's only digits, and any length other than 5, it should return the error about US code. But if it has any letters and is any length other than 6, it should return the error about Canadian code.

1 0

replied on May 24, 2024

Thank you for the reply.

0 0

You are not allowed to follow up in this post.

Question

Question

Postal Code Mask

Replies

Sign in to reply to this post.