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_

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