Wordpress custom form input check

Question

I've made a custom contact form in wordpress where the user has to fill in inputs step by step.

I've set fieldets for each step but some inputs are required and I want to check if the input value is empty and then let it stop. I've tried some things myself with an alert but whether it's empty or filled it gives me the alert anyway and after I click ok on the alert it still proceeds to the next step while I don't want that.

I hope someone can help me get on my way with this.

EDIT: I've added the jQuery with which I've tried it before.

The HTML:

<div class="msform">

    <!-- progressbar -->
    <ul class="progressbar-form">
        <li class="active">Name &amp; Company Name</li>
        <li>E-mail &amp; Phone</li>
        <li>Amount &amp; Date</li>
        <li>Subject</li>
        <li>Comments &amp; Send</li>
    </ul>

    <!-- fieldsets -->
    <fieldset>
        <h2 class="fs-title">Step 1</h2>
        <h3 class="fs-subtitle">Fill out your name and company name.</h3>
        [text* your-name class:required placeholder "Name*"] <!-- shortcode for wordpress form -->
        [text your-company placeholder "Company name"]
        <p style="color:#094076;">* = required</p>
        <input type="button" name="next" class="next action-button-form" value="Next" />    
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Step 2</h2>
        <h3 class="fs-subtitle">Fill out your e-mail and phonenumber.</h3>   
        [email* your-email class:required placeholder "E-mail*"]
        [tel* your-tel class:required placeholder "Phonenumber*"]
        <p style="color:#094076;">* = required</p>
        <input type="button" name="previous" class="previous action-button-form" value="Previous" />
        <input type="button" name="next" class="next action-button-form" value="Next" />
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Step 3</h2>
        <h3 class="fs-subtitle">Fill out your amount and preferred date.</h3>    
        [number your-amount min:1 max:10 placeholder "Amount"]
        [date your-date min:2018-03-01 placeholder "Date"]
        <input type="button" name="previous" class="previous action-button-form" value="Previous" />
        <input type="button" name="next" class="next action-button-form" value="Next" />
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Step 4</h2>
        <h3 class="fs-subtitle">Fill out your subject.</h3>   
        [text* your-message class:required placeholder "Subject*"]
        <p style="color:#094076;">* = required</p>
        <input type="button" name="previous" class="previous action-button-form" value="Previous" />
        <input type="button" name="next" class="next action-button-form" value="Next" />
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Details</h2>
        <h3 class="fs-subtitle">Questions or comments about this form?</h3>
        [textarea your-details placeholder "Questions / Comments"]
        <input type="button" name="previous" class="previous action-button-form" value="Previous" /> [submit class:next class:submit-form class:action-button-form "Verzenden"]
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Thank you!</h2>
        <h3 class="fs-subtitle">Your message has been sent.</h3>
    </fieldset>
</div>    

The jQuery:

//jQuery
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type="text/javascript"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>

//jQuery Easing script
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>

//jQuery Form Script (WP syntax)
<script type='text/javascript'>
    jQuery(document).ready(function(){

       // Disabling the enter-button to prevent premature sending
        jQuery('.msform').on('keyup keypress', function (e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode === 13) {
                e.preventDefault();
                return false;
            }
        });

    var current_fs, next_fs, previous_fs; // Fieldsets
    var left, opacity, scale; // Fieldset styling
    var animating; // Prevent multi-click glitching

    jQuery(".next").click(function () { 
        if (animating) return false;
        if( !jQuery('input.required').val() ) {
           alert('warning');
           return false;
        }

        animating = true; 

        current_fs = jQuery(this).parent().parent();
        next_fs = jQuery(this).parent().parent().next();

        jQuery(".progressbar-form li").eq(jQuery("fieldset").index(next_fs)).addClass("active");

        next_fs.show();

        current_fs.animate({opacity: 0 }, {
            step: function (now, mx) {
                //1. Scale current_fs to 80%
                scale = 1 - (1 - now) * 0.2;
                //2. Let next_fs come in from right (50%)
                left = (now * 50) + "%";
                //3. Set opacity of next_fs to 1 when entering.
                opacity = 1 - now;
                current_fs.css({'transform': 'scale(' + scale + ')' });
                next_fs.css({'left': left, 'opacity': opacity });
            },
            duration: 800, 
            complete: function () {
                current_fs.hide();
                animating = false; 
            },
            easing: 'easeInOutBack'
        });       
    });


    jQuery(".previous").click(function () {
        if (animating) return false;
        animating = true;

        current_fs = $(this).parent().parent();
        previous_fs = $(this).parent().parent().prev();

        jQuery(".progressbar-form li").eq(jQuery("fieldset").index(current_fs)).removeClass("active");

        previous_fs.show();
        current_fs.animate({opacity: 0 }, {
            step: function (now, mx) {    
                scale = 0.8 + (1 - now) * 0.2;
                left = ((1 - now) * 50) + "%";
                opacity = 1 - now;
                current_fs.css({'left': left });
                previous_fs.css({'transform': 'scale(' + scale + ')', 'opacity': opacity });
            },
            duration: 800,
            complete: function () {
                current_fs.hide();
                animating = false;
            },
            easing: 'easeInOutBack'
        });
    });
});
</script>

To prevent this post from getting any longer I've left out the CSS.

Here's a fiddle even tho it doesnt work because its wordpress stuff

Answer 1

relatively new to StackOverflow but if I understood your question correctly you could maybe use something along the lines of:

if($('.input1').val()){
Your Code here
}

This basically checks if the input1 has content in, whether that be checkbox or text.

This could be what you're looking for, maybe not but hey ho worth a shot of helping :P

Hope this helps!

Answer 2

It checks all inputs with the class required, means also the ones outside that fieldset. So gave the fieldset a class and let it check within. Then after check give that class to the next fieldset.

Obvious but I've been blind.

Credits to @cjmling for letting me see what I couldn't