Contact form 7 validation across multipule sections

I’ve built a contact form in WordPress using contact form 7 and I have it split into sections that show and hide on next and back buttons. So There are 5 steps with questions on each section and when next is clicked it hides the first section and shows the next the last section submits the form. The issue I have is the form doesn’t validate until the submit button is clicked and I need each fieldset to validate before the next step is available.

Here is my form code

<fieldset class="first p-t-sm">
    <div class="form-top p-b-lg">
        <div class="form-top-left">
            <h3>Step 1 of 5 Centre Details</h3>
        </div>
    </div>
    <div class="form-bottom row">
        <div class="col-sm-5">
            <div class="form-group">
                <div class="input-row">
                    <label>Centre Name:
                        [text* centre-name]
                    </label>
                </div>
                <div class="input-row">
                    <label>Centre Address Line 1:
                        [text* centre-address-1]
                    </label>
                </div>
                <div class="input-row">
                    <label>Centre Address Line 2:
                        [text centre-address-2]
                    </label>
                </div>
                <div class="input-row">
                    <label>Town:
                        [text* centre-address-town]
                    </label>
                </div>
                <div class="input-row">
                    <label>Postcode:
                        [postcode* centre-address-postcode]
                    </label>
                </div>
                <div class="input-row">
                    <label>Contact Number:
                        [text* centre-contact-number]
                    </label>
                </div>
                <button type="button" class="btn btn-next">Next</button>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-sm-7">
            <div class="section-1-image"></div>
        </div>
    </div>
</fieldset>

<fieldset class="p-t-sm">
    <div class="form-top p-b-lg">
        <div class="form-top-left">
            <h3>Step 2 of 5 Event Details</h3>
        </div>
    </div>
    <div class="form-bottom row">
        <div class="col-sm-5">
            <div class="form-group">
                <div class="input-row">
                    <label>Event Name:
                        [text* event-name]
                    </label>
                </div>
                <div class="input-row">
                    <label>Event Address Line 1:
                        [text* event-address-1]
                    </label>
                </div>
                <div class="input-row">
                    <label>Event Address Line 2:
                        [text event-address-2]
                    </label>
                </div>
                <div class="input-row">
                    <label>Town:
                        [text* event-address-town]
                    </label>
                </div>
                <div class="input-row">
                    <label>Postcode:
                            [postcode* event-address-postcode]
                    </label>
                </div>
                <button type="button" class="btn btn-previous">Previous</button><button type="button" class="btn btn-next">Next</button>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-sm-7">
            <div class="section-1-image"></div>
        </div>
    </div>
</fieldset>


<fieldset>
    <div class="form-top p-b-lg">
        <div class="form-top-left">
            <h3>Step 3 of 5 Event Dates</h3>
        </div>
    </div>
    <div class="form-bottom row">
        <div class="form-group col-sm-12">
            <div class="input-row">
                <div class="col-sm-4">
                    <label>Event Date:</label>
                </div>
                <div class="col-sm-4">
                    <label>Start Time:</label>
                </div>
                <div class="col-sm-4">
                    <label>End Time:</label>
                </div>
                [repeater add-label:Add remove-label:Remove index:0 min:0 max:10 show:1]
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
        <button type="button" class="btn btn-previous">Previous</button><button type="button" class="btn btn-next">Next</button>
        <div class="clearfix"></div>
    </div>
</fieldset>


<fieldset>
    <div class="form-top p-b-lg">
        <div class="form-top-left">
            <h3>Step 4 of 5 Event Description</h3>
        </div>
    </div>
    <div class="form-bottom row">
        <div class="col-sm-8 col-sm-push-2">
            <div class="form-group">
                <div class="input-row">
                    <label>Event Description:
                        [textarea event-description]
                    </label>
                </div>
            </div>
            <button type="button" class="btn btn-previous">Previous</button><button type="button" class="btn btn-next">Next</button>
            <div class="clearfix"</div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="section-4-image"></div>
    </div>
</fieldset>


<fieldset>
    <div class="form-top p-b-lg">
        <div class="form-top-left">
            <h3>Step 5 of 5 Event Entertainment</h3>
        </div>
    </div>
    <div class="form-bottom row">
        <div class="col-sm-8 col-sm-push-2">
            <div class="form-group">
                <div class="input-row col-sm-12">
                    <label>Event Includes:</label>
                        [checkbox entertainment "Entertainment"]
                        [checkbox refreshments "Refreshments"]
                        [checkbox bike-donations "Bike donations"]
                        [checkbox bike-maintenance "Bike Maintenance tips"]
                        [checkbox puncture-repair-workshops "Puncture repair workshops"]
                        [checkbox bike-health-checks "Bike health checks"]
                        [checkbox bike-safety-tips "Bike safety tips"]
                        [checkbox led-bike-rides "Led bike rides"]
                </div>
            </div>
            <button type="button" class="btn btn-previous">Previous</button>[submit class:btn class:btn-finish "Finish"]
        </div>
    </div>
</fieldset> 

My JS to navigate through the sections is like this

$('.registration-form .btn-next').on('click', function() {
        var parent_fieldset = $(this).parents('fieldset');

        parent_fieldset.fadeOut(250, function() {
            $(this).next().fadeIn();
        });

    });
    $('.registration-form .btn-previous').on('click', function() {
        $(this).parents('fieldset').fadeOut(250, function() {
            $(this).prev().fadeIn();
        });
    });  

Read more here: Contact form 7 validation across multipule sections

Leave a Reply

Your email address will not be published. Required fields are marked *