0

Im using {exp:freeform_next:render form="my_form"} to display my form in collapse DIV. Form is only shown as user clicks on button.

How can i use {if form:has_errors}show{/if} or similar to show DIV as errors are found?

  • Would be helpful if you could provide some more information about your environment. Version of EE, version of Freeform you are using. Also not clear whether question is that you want the errors to show up even if the form is collapsed, or just how you show errors when form is expanded... could you clarify these points please? – JCOGS Design Apr 7 at 10:43
  • EE 5.3, Freeform 1.8.3. Form itself is in Bootstrap DIV with .collapse (eg. hidden by default). If user clikcs button “Show_form” then .show is added and DIV is now displayed with form inside it. Now when form has errors, page is loaded again and to see errors you need to click button “Show_form” again. What i want to accomplish is: when form has errors set automatically {if form:has_errors}.show{/if} to parenting DIV. – user3058 Apr 8 at 6:52
0

I think all you need to do is rearrange the layout of your HTML to allow use of the {if form:has_errors...} conditional at the point where you add the HTML for the hidden DIV. If you can do this you can use this conditional to force-add the css style to the div involved when an error is present. Something like...

<div class="{if form:has_errors}show{if:else}collapse{/if}">
... form here ...
</div>

If you cannot rearrange the HTML to use the has_errors conditional in that way you have two choices:

  1. Create the form in earlier in a template layout stack and push it into an layout variable, and then you can test the completed HTML for the error state when you insert the layout variable in the final layout
  2. Add some javascript to the page that looks for a marker generated by the has_errors conditional (e.g. put in a named hidden div within the form) and use that to add the show class to the form as a whole.

HTH

| improve this answer | |
  • 1
    OK. Was hoping for (Freeform) native way to get this result. Javascript if($("#alert").length) { $("#collapse").addClass("show"); did the trick. – user3058 Apr 9 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.