JSFiddle - React, Tailwind, and code Playground

by theoperatore

HTML

<form name="endingweights" method="post">
        
        <!-- hidden inputs -->
        <input id="foo" type="number" min="0" max="1500" required>
        <input id="bar" type="number" min="0" max="1500" required>
        <input id="baz" type="number" min="0" max="1500" required>
        <input type="submit" value="Submit">
 </form>

JavaScript

var form = document.forms['endingweights'],
        foo  = document.getElementById('foo'),
        bar  = document.getElementById('bar'),
        baz  = document.getElementById('baz');
    
    // validate inputs and form
    form.addEventListener('submit', function(ev) {
        ev.preventDefault();
        ev.stopPropagation();
        // make sure constraints are followed
        if ((foo.value !== 0 && foo.value <= 700) ||
            (bar.value !== 0 && bar.value <= 700) ||
            (baz.value !== 0 && baz.value <= 700))
        {
            alert("All input values must be either 0 or greater than 700");
            return false;
        }
        
        // perform other validations if necessary
        
        // submit form
        //form.submit();
        console.log("form submitted", form);
        
    }, false);