Joi custom error for each validation option - javascript

I have Joi schema and want to specify a custom error message for each of the options.
Example of my schema:
const schema = Joi.object().keys({
name: Joi.string()
.min(5).error(() => 'first message')
.max(25).error(() => 'second message')
.required().error(() => 'third message')
)}
At the moment this validation works in such way: if whatever of the option is invalid only third message appears.
Expected behavior - error message appears according to which option is invalid (as default Joi behavior, but with my custom error message).
Thanks in regards!


const schema = Joi.object().keys({
title: Joi.string()
.min(5)
.max(25)
.required()
.messages({
"string.min": "first msg",
"string.max": "second msg",
"any.empty":"third msg"
})
})
These is the best way to show custom error messages


For my situation I just found such solution:
const schema = Joi.object().keys({
title: Joi.string()
.min(5)
.max(25)
.required()
.error((errors) => {
return errors.map(error => {
switch (error.type) {
case "string.min":
return { message: "first msg" };
case "string.max":
return { message: "second msg" };
case "any.empty":
return { message: "third msg" };
}
}
)
})
Seems not the best one, as it cause too many code, especialy if you have big form, hovewer it works as I desire.

Related

Validation to prevent brand names being in the email field?

So, I have this list of some brandnames:
const blackListedDomains = [
'facebook',
'google',
'amazon',
'netflix',
'hotmail',
'microsoft',
'gmail',
'yahoo',
]
which I need to prevent users to enter in the email field, what Schema could be built using Yup Package.
For example, I am trying this way:
const DomainSchema = Yup.object().shape({
subdomain: Yup.string()
.required('Required')
.lowercase()
.notOneOf(
blackListedDomains,
'Cannot use trademarked names in domain!',
),
})
But, I don't know how to get it from the email string, for example, if user inputs xyz#google.xyz, then how to extract google from the email string and then iterate it over the domain names list to find if it exists there and then show an error message ?

You can use test function of yup library to create a custom validation rule like this:
const DomainSchema = Yup.object().shape({
email: Yup.string()
.required("Required")
.lowercase()
.email("Not a valid mail")
.test(
"is-not-blacklist",
"Cannot use trademarked names in domain!",
(value) => {
if (value) {
const currentDomain = value.substring(
value.indexOf("#") + 1,
value.indexOf(".")
);
return !blackListedDomains.includes(currentDomain);
}
}
)
});
You can take a look at this sandbox for a live working example of this solution.

How to change default error message in Yup

How to change default error message to custom error message: my custom message
const VALIDATION_SCHEME = Yup.object().shape({
numOne: Yup.Number().required('!'),
numTwo: Yup.Number()
.required('!')
.when('numOne', ((numOne, schema) => schema.max(numOne - 1)))
});

You need to use moreThan hook to perform the validation you want as below.
const validationSchema = yup.object({
numOne: yup.string().required("Custom 2"),
numTwo: yup
.number()
.lessThan(yup.ref("numOne"), "Your Custom Message")
.max(yup.ref("numOne"))
});
Working example - https://codesandbox.io/s/peaceful-cache-k2g4lc?file=/index.js

alternative:
numOne: yup.number()
.required("1")
.moreThan(yup.ref("numTwo"), "This is 1"),
numTwo: yup.number()
.required("2")
.lessThan(yup.ref("numOne"), "This is 2")

Raise validation when recive extra key in yup object

I am using yup for object validations. I have the following schema
const schema = yup.object().shape({
name: yup.string().required(),
});
I am validating it with object
{
"name": "Foo",
"desc": "Lorem ipsum"
}
Yup validates this object although it has an extra key desc. I want to raise the error for extra keys in the object.
I have tried with abortEarly and stripUnknown in .validate but it doesn't work.
schema.validateSync(data, { strict: true, stripUnknown: true })

You need to append the .strict() to the object you are validating. This makes the validation fail and then you can handle the error however you wish to do that.
So, in your case, change your schema to this:
const schema = yup.object().shape({
name: yup.string().required()
}).noUnknown(true).strict();
await schema.validate(data, { abortEarly: false });

Joi validation display custom error message

Hi I am using "#hapi/joi": "^15.1.1". Unfortunately, I can't update to the latest Joi version right now.
This is my validation schema
const schema = {
name: Joi.string()
.allow("")
.max(30),
addLine1: Joi.string()
.required()
.label("Address Line 1"),
locality: Joi.string()
.required()
.label("City"),
region: Joi.string()
.required()
.label("State"),
zipCode: Joi.number()
.required()
.label("Zip Code"),
phoneNo: Joi.string()
.required("Required")
.regex(/^[0-9]{3}\-[0-9]{3}\-[0-9]{4}$/)
};
Then I validate and display the first error that occurred
const result = Joi.validate(this.state.addressDetails, this.schema, {
abortEarly: true,
});
return const errors = result.error.details[0].message;
This works. The only problem is I want to display a custom error message instead of the default one.
Default error message for address is "Address Line 1" is not allowed to be empty"
Instead of this, I want to display "Address is required!"
For the regex default one is
phoneNo with value "555" fails to match the required pattern: /^[0-9]{3}\-[0-9]{3}\-[0-9]{4}$/
Instead, I want to display please enter a valid phone number
How could I achieve this with version 15.1.1.
Newer versions messages thing won't help here.

Try out to return the message from the .error callback
addLine1: Joi.string()
.required()
.label("Address Line 1").error(()=>'"Address Line 1" is not allowed to be empty'),

Conditional Validation in Yup

I have an email field that only gets shown if a checkbox is selected (boolean value is true). When the form get submitted, I only what this field to be required if the checkbox is checked (boolean is true).
This is what I've tried so far:
const validationSchema = yup.object().shape({
email: yup
.string()
.email()
.label('Email')
.when('showEmail', {
is: true,
then: yup.string().required('Must enter email address'),
}),
})
I've tried several other variations, but I get errors from Formik and Yup:
Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at yupToFormErrors (formik.es6.js:6198)
at formik.es6.js:5933
at <anonymous>
yupToFormErrors # formik.es6.js:6198
And I get validation errors from Yup as well. What am I doing wrong?

You probably aren't defining a validation rule for the showEmail field.
I've done a CodeSandox to test it out and as soon as I added:
showEmail: yup.boolean()
The form started validation correctly and no error was thrown.
This is the url: https://codesandbox.io/s/74z4px0k8q
And for future this was the correct validation schema:
validationSchema={yup.object().shape({
showEmail: yup.boolean(),
email: yup
.string()
.email()
.when("showEmail", {
is: true,
then: yup.string().required("Must enter email address")
})
})
}

Formik author here...
To make Yup.when work properly, you would have to add showEmail to initialValues and to your Yup schema shape.
In general, when using validationSchema, it is best practices to ensure that all of you form's fields have initial values so that Yup can see them immediately.
The result would look like:
<Formik
initialValues={{ email: '', showEmail: false }}
validationSchema={Yup.object().shape({
showEmail: Yup.boolean(),
email: Yup
.string()
.email()
.when("showEmail", {
is: true,
then: Yup.string().required("Must enter email address")
})
})
}
/>

You can even use a function for complex cases . Function case helps for complex validations
validationSchema={yup.object().shape({
showEmail: yup.boolean(),
email: yup
.string()
.email()
.when("showEmail", (showEmail, schema) => {
if(showEmail)
return schema.required("Must enter email address")
return schema
})
})
}

Totally agree with #João Cunha's answer. Just a supplement for the use case of Radio button.
When we use radio button as condition, we can check value of string instead of boolean. e.g. is: 'Phone'
const ValidationSchema = Yup.object().shape({
// This is the radio button.
preferredContact: Yup.string()
.required('Preferred contact is required.'),
// This is the input field.
contactPhone: Yup.string()
.when('preferredContact', {
is: 'Phone',
then: Yup.string()
.required('Phone number is required.'),
}),
// This is another input field.
contactEmail: Yup.string()
.when('preferredContact', {
is: 'Email',
then: Yup.string()
.email('Please use a valid email address.')
.required('Email address is required.'),
}),
});
This the radio button written in ReactJS, onChange method is the key to trigger the condition checking.
<label>
<input
name="preferredContact" type="radio" value="Email"
checked={this.state.preferredContact == 'Email'}
onChange={() => this.handleRadioButtonChange('Email', setFieldValue)}
/>
Email
</label>
<label>
<input
name="preferredContact" type="radio" value="Phone"
checked={this.state.preferredContact == 'Phone'}
onChange={() => this.handleRadioButtonChange('Phone', setFieldValue)}
/>
Phone
</label>
And here's the callback function when radio button get changed. if we are using Formik, setFieldValue is the way to go.
handleRadioButtonChange(value, setFieldValue) {
this.setState({'preferredContact': value});
setFieldValue('preferredContact', value);
}

email: Yup.string()
.when(['showEmail', 'anotherField'], {
is: (showEmail, anotherField) => {
return (showEmail && anotherField);
},
then: Yup.string().required('Must enter email address')
}),

it works for me very well :
Yup.object().shape({
voyageStartDate:Yup.date(),
voyageEndDate:Yup.date()
.when(
'voyageStartDate',
(voyageStartDate, schema) => (moment(voyageStartDate).isValid() ? schema.min(voyageStartDate) : schema),
),
})

I use yup with vee-validate
vee-validate
here is the sample code from project
const schema = yup.object({
first_name: yup.string().required().max(45).label('Name'),
last_name: yup.string().required().max(45).label('Last name'),
email: yup.string().email().required().max(255).label('Email'),
self_user: yup.boolean(),
company_id: yup.number()
.when('self_user', {
is: false,
then: yup.number().required()
})
})
const { validate, resetForm } = useForm({
validationSchema: schema,
initialValues: {
self_user: true
}
})
const {
value: self_user
} = useField('self_user')
const handleSelfUserChange = () => {
self_user.value = !self_user.value
}

Categories