HTML Jquery - Validate sections of form.

[SoftwareNinja]

Hi all,

 

I am working on a simple booking form with different steps. I would like to validate each step to make sure all inputs are filled for that section before moving to the next step.

 

I am using the basic version of MDBootstrap and you can view my code below. Thanks in advance.

 

<!-- Horizontal Steppers -->
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <!-- Stepers Wrapper -->
            <ul class="stepper stepper-horizontal">

                <!-- First Step -->
                <li class="completed" id="StepOne">
                    <a href="#!">
                        <span class="circle">1</span>
                        <span class="label">Your details</span>
                    </a>
                </li>

                <!-- Second Step -->
                <li class="disabled" id="StepTwo">
                    <a href="#!">
                        <span class="circle">2</span>
                        <span class="label">Desired Time</span>
                    </a>
                </li>

                <!-- Third Step -->
                <li class="disabled" id="StepFinish">
                    <a href="#!">
                        <span class="circle">2</span>
                        <span class="label">Finish</span>
                    </a>
                </li>

            </ul>
            <!-- /.Stepers Wrapper -->
            <form class="needs-validation" novalidate>
                <div class="form-group" id="SectionOne">
                    <div class="form-row">
                        <div class="col-md-4 mb-3">
                            <label for="validationCustom01">First name</label>
                            <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value=""
                                   required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="validationCustom02">Last name</label>
                            <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value=""
                                   required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="validationCustomUsername">Email</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroupPrepend"><i class="fas fa-envelope"></i></span>
                                </div>
                                <input type="email" class="form-control" id="validationCustomUsername" placeholder="example@gmail.com"
                                       aria-describedby="inputGroupPrepend" required>
                                <div class="invalid-feedback">
                                    Please enter an email address
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="validationCustomUsername">Mobile Number</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroupPrepend"><i class="fas fa-phone-alt"></i></span>
                                </div>
                                <input type="number" class="form-control" id="validationCustomUsername" placeholder="08712345678"
                                       aria-describedby="inputGroupPrepend" required>
                                <div class="invalid-feedback">
                                    Please provide your phone number
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group hidden" id="SectionTwo">
                    <div class="form-row">
                        <div class="col-md-4 mb-3">
                            <label for="validationCustom01">Your desired date</label>
                            <input type="datetime-local" class="form-control" id="validationCustom02" value=""
                                   required>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group hidden" id="SectionFinish">
                    <!--Details of whole form here-->
                    <p>Hello world</p>
                </div>

                <button class="btn btn-primary btn-sm" type="submit" id="nextOne">Next</button>
            </form>

        </div>
    </div>
</div>

 

JS

<script>

    (function () {
        'use strict';
        window.addEventListener('load', function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    else {

                        if ($('#SectionOne').hasClass('hidden') === false) {
                            GoToStageTwo();
                        }
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();

    function GoToStageOne() {

    }

    function GoToStageTwo() {
        $('#SectionOne').addClass('hidden');
        $('#SectionTwo').removeClass('hidden');

        $('#StepTwo').removeClass('disabled');
        $('#StepTwo').addClass('completed');
    }

    function GoToStageFinish() {
        $('#SectionTwo').addClass('hidden');
        $('#SectionFinish').removeClass('hidden');
    }

</script>