JSFiddle - React, Tailwind, and code Playground

by kneidels

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<form class="uploader" method="post" action="?task=edit" id="sectionsX" name="sections" enctype="multipart/form-data">
    <input name="foo" required="required" type="file"><br />
    <button class=" btn btn-primary" type="submit">Submit</button>
</form>

<form class="uploader" method="post" action="?task=edit" id="sectionsX" name="sections" enctype="multipart/form-data">
    <input name="foo" required="required"><br />
    <button class=" btn btn-primary" type="submit">Submit</button>
</form>

<form class="uploader" method="post" action="?task=edit" id="sectionsX" name="sections" enctype="multipart/form-data">
    <input name="foo" required="required"><br />
    <button class=" btn btn-primary" type="submit">Submit</button>
</form>

JavaScript

$(document).ready(function() {

    $('.uploader').each(function() {
		var myform = $(this);
        myform.validate({
            invalidHandler: function(event, validator) {
                alert('Please be sure to fill out all mandatory fields');
            },
            submitHandler: function(form) { // <- pass 'form' argument in
                myform.find("button").html('Processing...').attr("disabled", "disabled");
                form.submit(); // <- use 'form' argument here.
            }
        });
    });

});