Not getting notification of required fields

Question

I have a Freeform Pro form that has a few required fields and uses a submit button to check server response time. The form works fine, stores the data in the Freeform database when submitted, etc. But when the required fields are not provided, there is no notification provided that the fields are invalid. The form is not submitted when these fields are invalid, but the user is still redirected to my confirmation page staying the form was submitted.

I know this has something to do with my submit button. When I remove the javascript from the submit button, it works as it should.

Here is my code:

{exp:freeform:form form_name="contact" form:class="form" required="first_name|last_name|email|phone|user_message"}
                <fieldset>
                    <div class="header">
                        <h2>Contact us for an initial consultation</h2>
                        <p>If you would like a member of our staff to contact you for a free initial consultation on your case, please complete this form, or call us toll-free at <a href="tel:8777048050" class="tel-link">877-704-8050.</a></p>
                    </div>
                    <div class="input-area">
                        <div class="row">
                            <div class="col input-holder">
                                {freeform:field:first_name attr:placeholder="First Name"}
                            </div>
                            <div class="col input-holder">
                                {freeform:field:last_name attr:placeholder="Last Name"}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col input-holder">
                                {freeform:field:email attr:placeholder="Email"}
                            </div>
                            <div class="col input-holder">
                                {freeform:field:phone attr:placeholder="Phone"}
                            </div>
                        </div>
                        <div class="row">
                            {freeform:field:user_message attr:placeholder="Your message..."}
                        </div>
                        {freeform:field:page_url}
                        <button type="submit" class="progress-button" data-style="shrink" data-horizontal>Submit</button>
                    </div>
                    <div class="footer">
                        <p>This web site is designed for general information only. The information presented at this site should not be construed to be formal legal advice nor the formation of a lawyer/client relationship.</p>
                    </div>
                </fieldset>
            {/exp:freeform:form}

And the script that runs the submit button:

// progress button init
function initProgressBtn(){
    jQuery('.form').each(function() {
        var form = jQuery(this);
        var sendBtn = form.find('.progress-button');
        var ajaxBusy = false;

        new ProgressButton( sendBtn.get(0), {
            callback : function( instance ) {
                var progress = 0,
                interval = setInterval( function() {
                    progress = Math.min( progress + Math.random() * 0.1, 1 );
                    instance._setProgress( progress );

                    if( progress === 1 ) {
                        instance._stop(1);
                        clearInterval( interval );
                    }
                }, 200 );
                form.trigger('startProgress');
            }
        });

        function onSendForm(e) {
            e.preventDefault();
            if(!ajaxBusy) {
                ajaxBusy = true;

                jQuery.ajax({
                    url: form.attr('action'),
                    type: form.attr('method'),
                    data: form.serialize(),
                    dataType: 'text',
                    success: function() {
                    window.location.href = "/request-received/";
                    }
                });
            }
        }

        form.on('submit startProgress', onSendForm);
    });
}

Is there are way to use the javascript for submission but still utilize freeform/ee's form validation? Thanks for any help.

Answer 1

I was able to resolve this by using Forms JS validation which is a great EE addon.