JSFiddle - React, Tailwind, and code Playground

by dimitardanailov

HTML

<form>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    <input type="submit" value="Submit">
</form>

JavaScript

// Prevent form submit if any entrees are missing
$('form').submit(function(e){
    
    e.preventDefault();
    
    var formIsValid = true;
    
    // Count validation steps
    var validationLoop = 0;
    
    // Cycle through each Attendee Name
    $('[name="atendeename[]"]', this).each(function(index, el){

        // If there is a value
        if ($(el).val().length > 0) {
            validationLoop++;
            
            // Find adjacent entree input
            var entree = $(el).next('input');
            
            var entreeValue = entree.val();
            
            // If entree is empty, don't submit form
            if (entreeValue.length === 0) {
                alert('Please select an entree');
                entree.focus();
                formIsValid = false;
                return false;
            }
            
        }
        
    });
    
    if (formIsValid && validationLoop > 0) {
        alert("Correct Form");
        return true;
    } else {
        return false;
    }
});