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="button" 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="button" value="Search Name"/>
            <hr />
</form>

JavaScript

$(document).ready(function() {

    $('#submitNameSearch').click(function(event) {
        event.preventDefault();
        if (validate($('#searchLastName'), 'Last name field is required.')) {
            $('#infoForm').submit();
        }
    });

    $('#submitIDSearch').click(function(event) {
        event.preventDefault();
        if (validate($('#searchID'), 'ID field is required.')) {
            $('#infoForm').submit();
        }
    });
});
    function validate (input, errorMsg) {
        if (input.val() == null || input.val().length == 0) {
            alert(errorMsg);
            return false;
        }
        return true;
    }