How do I validate field-yield is populated before moving onto the next step in a multi-stage form?

Question

My apologies, I am certain this is a simple solution. However, the community has been so kind in the past, so I thought I would see if someone could point me in the right direction.

We utilise an external piece of software for managing our database and hosting our data capture forms. This solution limits us to calling field yields when we build our forms.

So my HTML for a multi step form may look something like this:

<form id="form-1">                                          

<fieldset id="step1">
    <h3> Are you Male or Female?</h3>

<field-yield data-field="F_901_ONLINE_GENDER"></field-yield>
</fieldset>


<fieldset id="step2"  style="display:none">
    <h3 style="font-family:poppins;"> Please tell us about you?</h3>

<field-yield data-field="F_3_FIRSTNAME"></field-yield>
<field-yield data-field="F_4_LASTNAME"></field-yield>                           
</fieldset> 


<fieldset id="step3"  style="display:none;">
    <h3> Please find your Address</h3>

        <div data-option="UK_ADDRESS_LOOKUP">
            <label data-db-localized-content="UK_ADDRESS_LOOKUP_LABEL"></label>
            <div class="input">
                <input class="PCODE" name="UK_ADDRESS_LOOKUP_POSTCODE" type="text" placeholder="" data-db-localized-placeholder="UK_ADDRESS_LOOKUP_PLACEHOLDER" value=""required><br>
                <button class="mbbutton" type="button" data-db-localized-content="UK_ADDRESS_LOOKUP_LOOKUP_BUTTON"></button> <br>

                <select class="form-control" name="UK_ADDRESS_LOOKUP_ADDRESS" type="text" placeholder="" required>
                    <option is-placeholder data-db-localized-content="UK_ADDRESS_LOOKUP_ADDRESS_PLACEHOLDER"></option>
                </select>
            </div> <br><br>
        </div><field-yield data-field="F_9_TOWNCITY"></field-yield><field-yield data-field="F_6_ADDRESS1"></field-yield><field-yield data-field="F_11_POSTCODE"></field-yield>
<input type="submit"style="display:none;" data-db-localized-value="FORM_SUBMIT">
</fieldset>


<div class="col-12">
<br>
<button type="button" id="next">Start Quote!</button>
<p style="height: 40px;text-align:left;padding-left: 10px;padding-bottom: 0px;margin-bottom: -25px;"><button class="customBackBtn previous shadow" style="display:none;font-size:15px!important" id="previous" type="button"> <i class="fas fa-arrow-circle-left"></i> <strong>Back</strong></button></p><br>

</form>

The system has inbuilt checks that make the field yields "required" However, it would appear that these only operate on the "submit button" so if a user skips through to the end, missing a filed on step1 the form does not submit, it also doesn't display the error message coded into the field yields.

As you can imagine, this is rubbish UX and so we lose a lot of form completions.

What I am looking to achieve is code that validates that all fields in each step are populated before moving to the next step, preventing users from getting to a submit button that won't function.

current JS is:

$(function () {

    var currentPage = 1;
    var maxPage = 3; //if additional fieldset steps add the max page here i.e., if 7 pages maxPage = 7

    $("#next").click(function () {
        if (currentPage < maxPage) {
            var nextPage = currentPage + 1;
        } else {
            return; //if already at max page 
        }


        trackProgress(100 * ((nextPage - 1) / maxPage).toFixed(1) + '%'); //get rid of decimal points (make a whole number)
        $("#step" + currentPage).hide();
        $("#step" + nextPage).show();
        $("#previous").show();


        currentPage = nextPage;
        if (currentPage === maxPage) {
            $('#next').hide()
            $('input[type="submit"]').delay(2000).show(0);
            $('#thanks').delay(2000).show(0);

            // Show submit button & thank you paragraph
        }
    });

    $("#previous").click(function () {
        if (currentPage !== 1) {
             $('#spinner').removeClass('hidden')
            var prevPage = currentPage - 1;
        } else {
            return;
        }

        trackProgress(100 * ((prevPage - 1) / maxPage).toFixed(1) + '%');
        $("#step" + currentPage).hide();
        $("#step" + prevPage).show();
        $('input[type="submit"]').hide();
        $('#thanks').hide();
        $("#next").show();

        currentPage = prevPage;
        if (currentPage === 1) {
            $('#previous').hide()
        }
    })

});

This allows both a progress bar to work, a back button for traversing the form and show/hide for each step. I wanted to add something like the following to the following to validate field completion.

if ($('input[name="F_901_ONLINE_GENDER"]').val() == '' && $('input[name="F_3_FIRSTNAME"]').val() == '' && $('input[name="F_4_LASTNAME"]').val() == ''){
                        alert('Please complete all questions');

However this is not working and I am at a loss as to what to try next.

Thank you in advance for any assistance!

Answer 1

I don't know how your system replaces <field-yield> tags, but I guess there will be typical form fields. So you need to write some general validation function, which will validate all fields in step and allow users to move on the next step if validation passed.

Function to validate all input fields in step:

function validateStep(step) {
    var stepWrapper = $('fieldset#step'+step);
    var emptyFields = 0;

    $('input[type="text"], select, textarea', stepWrapper).each(function(i, el) {
        if ($(el).val() == '') {
            emptyFields++;
            return false;
        }
    });

    //check radio buttons
    var radioGroups = {};
    //group radio buttons by name
    $(':radio', stepWrapper).each(function() {
        radioGroups[this.name] = true;
    });

    //count "checked" radio buttons in groups
    for (var radioName in radioGroups) {
        var checked = !!$(':radio[name="'+radioName+'"]:checked', stepWrapper).length;
        if (!checked) {
            emptyFields++;
        }
    }

    return emptyFields;
}

now you have step validation, the only thing you need to is call this function before step change:

$("#next").click(function () {

    //validate before move
    if (validateStep(currentPage)) {
        alert("Please fill all fields before move to next step!");
        return false;
    }


    if (currentPage < maxPage) {
        var nextPage = currentPage + 1;
    } else {
        return; //if already at max page 
    }

    //... rest of your code
}

Hope this helps you.

---

UPDATE: Here is a working example of your page form: https://codepen.io/zur4ik/pen/LYYqjgM I had a mistake in each loop.