Skip to content

Latest commit

 

History

History
67 lines (63 loc) · 2 KB

core-blocks-validation.md

File metadata and controls

67 lines (63 loc) · 2 KB

Adding More Validation for Core Blocks

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'

CodeSandbox

Please view this example in action at this CodeSandbox