using beforeGoingNext
, you can add more validation for Quill Forms core blocks.
Example:
<Form
formId="1"
beforeGoingNext: ({
setIsFieldValid,
setIsPending,
currentBlockId,
answers,
setFieldValidationErr,
setIsCurrentBlockSafeToSwipe,
goToField,
goNext
}) => {
if (
currentBlockId === "first-question" &&
answers[currentBlockId].value === "aaa"
) {
setIsFieldValid(currentBlockId, false);
setFieldValidationErr(currentBlockId, "This is a test");
setIsCurrentBlockSafeToSwipe(false);
} else {
setIsFieldValid(currentBlockId, true);
setFieldValidationErr(currentBlockId, "");
setIsCurrentBlockSafeToSwipe(true);
goNext();
}
}
formObj={{
blocks: [
{
name: "short-text",
id: "first-question",
attributes: {
classnames: "my-first-block",
nextBtnLabel: "Great",
attachment: {
type: "image",
url:
"https://quillforms.com/wp-content/uploads/2022/10/ludovic-migneault-B9YbNbaemMI-unsplash_50-scaled.jpeg"
},
layout: "split-right",
required: true,
label: "Let's start with your name"
},
},
{
name: "long-text",
id: "gqr1294c",
attributes: {
label: "Please type your message!"
required: true,
}
}
]
}}
/>
In this example, we throw error if the answer of the first question is 'aaa'
Please view this example in action at this CodeSandbox