My goal is to validate an input to only accept URLs in Google Maps format. There are three possible valid outputs for a Google Maps URL:
- (for Google Maps app)
- (I only want to focus on )
- (when sharing directly from Google Maps)
Currently, I am able to handle the first scenario and I believe I can use regular expressions to validate the URLs. However, my question is how to enable multiple regular expression validations using the Yup validator with React Hook Forms. Here's what I have so far:
const areaSchema = yup.object().shape({
...
urlGoogleMaps: yup.string()
.matches(/^https\:\/\/goo\.gl\/maps\//, 'Invalid Google Maps URL')
.required(requiredMessage),
...
});
I have attempted to use different matches, but it does not work because it tries to validate both match conditions as true:
For example, with an input like
const areaSchema = yup.object().shape({
...
urlGoogleMaps: yup.string()
.matches(/^https\:\/\/goo\.gl\/maps\//, 'Invalid Google Maps URL') * Validates
.matches(/^https\:\/\/goo\.gl\/secondMaps\//, 'Invalid Google Maps URL') * Does not validate, making it invalid
.required(requiredMessage),
...
});
Is there a way to validate multiple strings using multiple .matches()?