CSS/Validation on Confiform
Asked by 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:++   
![Screenshot 2023-05-12 154913.png](https://community.atlassian.com/t5/image/serverpage/image-id/256895iC24D04EA4C62AAC6/image-size/large?v=v2&px=999 "Screenshot 2023-05-12 154913.png")

++Currently using the below field validation:++   
![edit.png](https://community.atlassian.com/t5/image/serverpage/image-id/256896iD143114CC24A6CD0/image-size/large?v=v2&px=999 "edit.png")


Answers:
author: Alex Medved _ConfiForms_
body: 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


author: Md Pervez Nawaz
body: Thank [@Alex Medved _ConfiForms_](/t5/user/viewprofilepage/user-id/781630) , that really helped :)


Tags: confiforms

cloud

confluence-cloud