JSFiddle - React, Tailwind, and code Playground

HTML

<form name="formsub" method="post" action="submit.asp" onSubmit="return validateForm();">
    <label class="lbll">Name</label>
    <br />
    <input type="text" name="Name" id="Name" class="lbll" />
    <label class="lblr rtext">Dept</label>
    <br />
    <input type="text" name="Ward" id="Ward" class="lblr" />
    <label class="lbll">Job Title/Grade</label>
    <br />
    <input type="text" name="Job" id="Job" class="lbll" />
    <label class="lblr rtext">Leaving Date</label>
    <br />
    <input type="text" name="LDate" id="LDate" class="lblr" readonly="readonly" value="<%=Date()%>" />
    <label class="lbll">Reason for leaving</label>
    <br />
    <textarea name="Reason" id="Reason" class="lbll txtareastyled"></textarea>
    <br />
    <label class="lbll dest">Destination on leaving</label>
    <br />MC
    <input type="checkbox" name="MCHFT" id="MCHFT" />Other
    <input type="checkbox" name="ONHS" id="ONHS" />Private Sector
    <input type="checkbox" name="PSEC" id="PSEC" />Public Sector
    <input type="checkbox" name="PUBSEC" id="PUBSEC" />Education
    <input type="checkbox" name="EDU" id="EDU" />No Employment
    <input type="checkbox" name="NEMP" id="NEMP" />
    <br>
    <input type="submit" value="Submit Form" />
</form>

JavaScript

function validateForm() {

    var a = $('#Name').val();
    var b = $('#Ward').val();
    var c = $('#Job').val();
    var d = $('#LDate').val();
    var e = $('#Reason').val();

    var fa = $('#MCHFT').prop('checked');
    var fb = $('#ONHS').prop('checked');
    var fc = $('#PSEC').prop('checked');
    var fd = $('#PUBSEC').prop('checked');
    var fe = $('#EDU').prop('checked');
    var ff = $('#NEMP').prop('checked');


    if (a == null || a == "") {
        $('#EC1').show();
        $('#edialog').dialog('open');
        return false;
    }

    if (b == null || b == "") {
        $('#EC2').show();
        $('#edialog').dialog('open');
        return false;
    }

    if (c == null || c == "") {
        $('#EC3').show();
        $('#edialog').dialog('open');
        return false;
    }

    if (d == null || d == "") {
        $('#EC4').show();
        $('#edialog').dialog('open');
        return false;
    }

    if (e == null || e == "") {
        $('#EC5').show();
        $('#edialog').dialog('open');
        return false;
    }


    if (fa === "false" & fb === "false" || fb === "false" || fc === "false" || fd === "false" || fe === "false" || ff == "false") {
        $('#EC8').show();
        $('#edialog').dialog('open');
        return false;
    }
}