JSFiddle - React, Tailwind, and code Playground

by jaxkodex

HTML

<form id="infoForm" name="checkAbsenceForm" method="get" action="http://www.google.com" target="_blank">
            <label class="q">ID * <input id="searchID" name="searchRUID" maxlength="9" /></label>
            <input id="submitIDSearch" type="submit" value="Search ID"/>
            <hr />
            <label class="q">First Name <input id="searchFirstName" name="searchFirstName" maxlength="23"></label>
            <br />
            <label class="q">Last Name * <input id="searchLastName" name="searchLastName" maxlength="23"/></label>
            <input id="submitNameSearch" type="submit" value="Search Name"/>
            <hr />
</form>

JavaScript

$(document).ready(function() {
    var inp = null;
    var msg = '';

    $('#submitNameSearch').click(function(event) {
        inp = $('#searchLastName');
        msg = 'Last name field is required.';
    });

    $('#submitIDSearch').click(function(event) {
        inp = $('#searchID');
        msg = 'ID field is required.';
    });
    
    $('#infoForm').submit(function (event) {
        if (!validate(inp, msg)){
            event.preventDefault();
        }
    });
});

function validate(input, errorMsg) {
    if (input.val() == null || input.val().length == 0) {
        alert(errorMsg);
        return false;
    }
    return true;
}