XF 1.5 Toggle question on registration page

NinaMcI

Active member
I would like to add some optional custom user fields to the registration form, but have them in a show/hide toggle format so as not to put users off if they see a lengthy form to fill in.

I have succeeded in doing this by adding the code below to the register_form template:
Code:
<fieldset>
    
    <button onclick="myFunction()">Text here</button>
    
<div id="myDIV" style="display: none;">
    
        <xen:include template="custom_fields_edit">
        <xen:set var="$customFieldInputName" value="{$fieldMap.custom_fields}" />
    </xen:include>

</div>
</fieldset>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

</script>
However, clicking the toggle button brings up the Error Panel as the user hasn't completed the captcha or ticked the Terms & Conditions at this stage yet.

Could any of you super coders suggest a work-around which would prevent the Error Panel from appearing if the user clicks on the toggle button?

Naturally, I still want the Error panel to appear if all required fields haven't been completed on clicking the Sign Up button at the end.
 
Top Bottom