CSS/Validation on Confiform

[Md Pervez Nawaz]

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:

Currently using the below field validation:

[Alex Medved _ConfiForms_ · Accepted solution]

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

[Md Pervez Nawaz]

Thank @Alex Medved _ConfiForms_ , that really helped :)