How to show error messages in multiple grid columns using yup? so far it can show error messages only in one column and I have to correct the error in the previous column first, then the error message will show up in the current one.
this is the example screenshot, the running hours and downtime, if added, must be summed to 24 hours, if not then the error message will show up.
this is the error message if I change the data in row number 1
this is if I change the downtime in row number 4, it won't show the error message unless I change the downtime in row number 1 to the correct value (the one that summed up to 24) and then the error message will show up, just like in this picture.
this is the code, ignore the "checkrunninghours" validation code.
const customschema = (formValidationSchema, formComps, methods) => {
let customSchema
const { setValue, getValues } = methods
yup.addMethod(yup.array, 'checkrunninghours', function (fields) {
return this.test('checkrunninghours', 'cant be zero value', function (array, val) {
console.log('limitting', this)
//let msg = checkDuplicateRows(array, fields, field)
// return true;
let errors = []
_.mapValues(val.originalValue, (v, index) => {
if (v.runninghours <= 0) {
errors.push(index)
return;
}
})
if (errors.length === 0) {
return true
} else {
return this.createError({ path: `${this.path}[${errors[0]}].runninghours`, message: 'cant be zero' })
}
});
})
yup.addMethod(yup.array, 'checktotalhours', function (fields) {
return this.test('checktotalhours', 'should equal to 24 hours', function (array, val) {
console.log('limitting', this)
//let msg = checkDuplicateRows(array, fields, field)
// return true;
let errors = []
let totalHours = 24
_.mapValues(val.originalValue, (v, index) => {
if (v.runninghours + v.downtime !== totalHours) {
errors.push(index)
return;
}
})
if (errors.length === 0) {
return true
} else {
return this.createError({ path: `${this.path}[${errors[0]}].downtime`, message: 'does not equal to 24 hours' })
}
});
})
if (formValidationSchema) {
customSchema = formValidationSchema
.concat(
yup.object().shape({
inputgrid: yup.array()
.checkrunninghours(_.keys(_.pickBy(formComps, (x) => { return x.isunique })))
}))
.concat(
yup.object().shape({
inputgrid: yup.array()
.checktotalhours(_.keys(_.pickBy(formComps, (x) => { return x.isunique })))
}))
}
store.dispatch({ type: SET_VALIDATION_SCHEMA, payload: customSchema})
console.log(formValidationSchema)
}