CSS/Validation on Confiform

Md Pervez Nawaz May 12, 2023

Hi Guys,

I was trying to create a QUIZ in Confiform, wondering if there is an option so that form can validate the answers right away for users.

1. Either Form should throw an error on top of the form as soon as the user submits (the same way how currently it shows if a mandatory field is left blank)

2. Or instant validation and the field becomes red or pops up an error. (right now I am hiding the next question, and as soon as the correct option is selected, the next question is visible.)

Sample MCQ:
Screenshot 2023-05-12 154913.png

Currently using the below field validation:
edit.png

 

2 answers

1 accepted

0 votes
Answer accepted
Alex Medved _ConfiForms_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 12, 2023

Hi

Are you trying to create some custom validation that kicks in before the form submit?

Is that what you are trying to do?

Little demo:

http://recordit.co/nDpbdgtdFn

And the configuration for the reference:

<ac:structured-macro ac:macro-id="bf652e77-0228-4560-bdfc-d33ad1913efa" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">form</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="c1ad74af-5097-4974-814f-669292034c8f" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">messageBlock</ac:parameter>
<ac:parameter ac:name="fieldLabel">Message block</ac:parameter>
<ac:parameter ac:name="extras">error</ac:parameter>
<ac:parameter ac:name="type">infopanel</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="6a495f50-89dd-4dec-8692-b19505e44cd5" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">Q1</ac:parameter>
<ac:parameter ac:name="fieldLabel">Q1</ac:parameter>
<ac:parameter ac:name="values">false[1=Answer 1|2=Answer 2|3=Answer 3|]</ac:parameter>
<ac:parameter ac:name="type">radio_group</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="f380a066-c129-4c68-83ba-f0e37d76a62b" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">Q1:[empty] OR Q1:2</ac:parameter>
<ac:parameter ac:name="fieldName">messageBlock</ac:parameter>
<ac:parameter ac:name="action">Hide field</ac:parameter>
<ac:parameter ac:name="actionFieldName">Q1</ac:parameter>
<ac:parameter ac:name="withReverseRule">true</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="a7842bb0-e2a3-4d09-bdee-e46942a71e83" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">!Q1:[empty] AND !Q1:2</ac:parameter>
<ac:parameter ac:name="noPropagation">true</ac:parameter>
<ac:parameter ac:name="values">messageBlock=Incorrect answer for Q1&amp;Q2=</ac:parameter>
<ac:parameter ac:name="action">Set value</ac:parameter>
<ac:parameter ac:name="actionFieldName">Q1</ac:parameter>
<ac:parameter ac:name="withReverseRule">true</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="f8d90639-d08c-4b03-b474-c5077cca645c" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">Q1:[empty] OR !Q1:2</ac:parameter>
<ac:parameter ac:name="fieldName">Q2</ac:parameter>
<ac:parameter ac:name="action">Hide field</ac:parameter>
<ac:parameter ac:name="actionFieldName">Q1</ac:parameter>
<ac:parameter ac:name="withReverseRule">true</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="0c60c73c-eae0-4002-9490-54ad4dc997aa" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">Q2</ac:parameter>
<ac:parameter ac:name="fieldLabel">Q2</ac:parameter>
<ac:parameter ac:name="values">false[1=Answer 1|2=Answer 2|3=Answer 3|]</ac:parameter>
<ac:parameter ac:name="type">radio_group</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="f71b5899-f444-418c-9b92-2b7e47e72d08" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">Q2:[empty] OR Q2:1</ac:parameter>
<ac:parameter ac:name="fieldName">messageBlock</ac:parameter>
<ac:parameter ac:name="action">Hide field</ac:parameter>
<ac:parameter ac:name="actionFieldName">Q2</ac:parameter>
<ac:parameter ac:name="withReverseRule">true</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="84cc2029-c2aa-483a-a305-8389a098a774" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">!Q2:[empty] AND !Q2:1</ac:parameter>
<ac:parameter ac:name="values">messageBlock=Incorrect answer for Q2</ac:parameter>
<ac:parameter ac:name="action">Set value</ac:parameter>
<ac:parameter ac:name="actionFieldName">Q2</ac:parameter>
<ac:parameter ac:name="withReverseRule">true</ac:parameter>
</ac:structured-macro>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="966dd5fd-4742-40c5-99be-7e013b86c5e2" ac:name="confiform-entry-register" ac:schema-version="1">
<ac:parameter ac:name="type">Embedded</ac:parameter>
<ac:rich-text-body>
<p>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p>
<br/>
</p>

Hope it helps and gives some ideas

Alex

0 votes
Md Pervez Nawaz May 22, 2023

Thank @Alex Medved _ConfiForms_ , that really helped :)

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events