JSFiddle - React, Tailwind, and code Playground

HTML

<form name="addNewForm" id="addNewForm" action="index.php/ecr-form-to-database" onsubmit="return validateForm();" method="post">
    <table width="60%">
        <tr>
            <td>ECR No.:</td>
            <td>
                <input type="textbox" id="ecrNumber" name="ecrNumber" />
            </td>
        </tr>
        <tr>
            <td>Originator Name:</td>
            <td>
                <input type="textbox" id="origin" name="origin" value="<?php print $empName;?>" />
            </td>
        </tr>
        <tr>
            <td>Description:</td>
            <td>
                <textarea id="descript" name="descript"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">
                <input type="submit" value="Submit Form" />
            </td>
        </tr>
    </table>
</form>

JavaScript

function validateForm() {
    var x   = document.getElementById('ecrNumber');
    var y   = document.getElementById('origin');
    var des = document.getElementById('descript');
    
    if ( ! x.value ) {
        alert("ECR Number must be filled out");
        x.focus();
        return false;
    }
    
    if ( ! y.value ) {
        alert("Originator Name must be filled out");
        y.focus();
        return false;
    }
    
    if ( ! des.value ) {
        alert("Description must be filled out");
        des.focus();
        return false;
    }

    return true;
}