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_
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
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