Yup: [Feature Request] validation IP address (at least IPv4)

Created on 11 Sep 2019  路  2Comments  路  Source: jquense/yup

In the same way we have .email() or .url() why not have a method to validate IP addresses?
Note: distinction needs to be made between IPv4 vs IPv6

This would prevent users to seek for a regexp e.g. https://stackoverflow.com/questions/10006459/regular-expression-for-ip-address-validation or https://www.mkyong.com/regular-expressions/how-to-validate-ip-address-with-regular-expression/

or maybe even implement some (weird) extra code like what I've seen here on a project I'm working on:

let ipAddressSchema = Yup.string()
.matches(/(^(\d{1,3}\.){3}(\d{1,3})$)/, { message:'Invalid IP address', excludeEmptyString: true })
.test('ipAddress', 'IP address value should be less or equal to 255',
  value => {
    if(value === undefined || value.trim() === '') return true;
    return value.split('.').find(i => parseInt(i) > 255) === undefined;
  }
);

Note: I even found this https://www.regextester.com/104762 "yup-new" anyone?

Most helpful comment

For what it's worth, you can very easily turn this into a custom validation extending yup.string().

function ipv4(message = 'Invalid IP address') {
  return this.matches(/(^(\d{1,3}\.){3}(\d{1,3})$)/, {
    message,
    excludeEmptyString: true
  }).test('ip', message, value => {
    return value === undefined || value.trim() === ''
      ? true
      : value.split('.').find(i => parseInt(i, 10) > 255) === undefined;
  });
}

yup.addMethod(yup.string, 'ipv4', ipv4);

And use it like:

yup.string().ipv4().validateSync('10.10.0.12');
// '10.10.0.12'

yup.string().ipv4().validateSync('foo');
// Thrown: ValidationError: Invalid IP address

All 2 comments

For what it's worth, you can very easily turn this into a custom validation extending yup.string().

function ipv4(message = 'Invalid IP address') {
  return this.matches(/(^(\d{1,3}\.){3}(\d{1,3})$)/, {
    message,
    excludeEmptyString: true
  }).test('ip', message, value => {
    return value === undefined || value.trim() === ''
      ? true
      : value.split('.').find(i => parseInt(i, 10) > 255) === undefined;
  });
}

yup.addMethod(yup.string, 'ipv4', ipv4);

And use it like:

yup.string().ipv4().validateSync('10.10.0.12');
// '10.10.0.12'

yup.string().ipv4().validateSync('foo');
// Thrown: ValidationError: Invalid IP address

Yes, we try not to add new validations very often as they increase bundle size, especially when they are easy to write. The Idea with string.matches is that you can write these as needed

You can also avoid using addMethod if you want I usually just do something like

// yup helpers

export const ipv4  = string.matches(/(^(\d{1,3}\.){3}(\d{1,3})$)/, {
    message: 'Invalid IP address',
    excludeEmptyString: true
  }).test('ip', 'Invalid IP address', value => {
    return value === undefined || value.trim() === ''
      ? true
      : value.split('.').find(i => parseInt(i, 10) > 255) === undefined;
  }

You can parameterize it as a function if you want to make the message dynamic

Was this page helpful?
0 / 5 - 0 ratings

Related issues

you-fail-me picture you-fail-me  路  4Comments

cfteric picture cfteric  路  3Comments

seanbruce picture seanbruce  路  3Comments

ScreamZ picture ScreamZ  路  4Comments

the-daniel-rothig picture the-daniel-rothig  路  4Comments