JSFiddle - React, Tailwind, and code Playground

HTML

<form name="purchaseform" method="post" onsubmit="return validateForm()" action="submitpurchaseadmin.php">
    <table>
        <tr>
            <td>Form number</td>
            <td>
                <input type="text" id="no" name="no">
            </td>
        </tr>
        <tr>
            <td>Category</td>
            <td>
                <select id="cat" name="cat"></select>
            </td>
        </tr>
        <tr>
            <td>Item</td>
            <td>
                <select id="item" name="item"></select>
            </td>
        </tr>
        <tr>
            <td>Quantity</td>
            <td>
                <input type="text" id="qty" name="qty">
            </td>
        </tr>
        <tr>
            <td>Date</td>
            <td>
                <input type="text" name="date" value="<?php echo date(" d-m-Y "); ?>">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" name="submit" value="Save">
            </td>
        </tr>
    </table>
</form>

JavaScript

function validateForm() {
    var a = document.getElementById("no").value;
    var b = document.getElementById("qty").value;
    
    if (!a.length) {
        alert("Form number must be filled out");
        return false;
    }else if (!a.match(/^[0-9]+$/)) {
        alert("Form number must be filled with numbers only");
        return false;
    }else if (a.length > 10) {
        alert("Form number must not be greater than 10 character length");
        return false;
    }else if (!b.length) {
        alert("Quantity must be filled out");
        return false;
    }else if (!b.match(/^[0-9]+$/)) {
        alert("Quantity must be filled with numbers only");
        return false;
    }
}