JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="#">
    <table width="50%" border="0">
        <tr>
            <td id="name">Name</td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td id="subject">Subject</td>
            <td><input type="text" name="subject" /></td>
        </tr>
        <tr>
            <td id="examnumber">Examination Number</td>
            <td><input type="text" name="examnumber" /></td>
        </tr>
        <tr>
            <td id="entry">Level of Entry</td>
            <td><input type="radio" name="entry" value="gcse" onclick="alert('hello');"/>GCSE<BR></td>
            <td><input type="radio" name="entry" value="as" />AS<BR></td>
            <td><input type="radio" name="entry" value="a2" />A2<BR></td>
        </tr>
        <tr>
            <td><input type="submit" name="Submit" value="Submit" /></td>
            <td><input type="reset" name="Reset" value="Reset" onclick="resetForm();"></td>
        </tr>
    </table>
</form>

JavaScript

var form = document.forms['ExamEntry'];
var iName = form.elements['name'];
var iSubject = form.elements['subject'];
var iExamNumber = form.elements['examnumber'];
var iLevel = form.elements['entry'];

function validateForm() {
    var result = true;
    var msg = "";
    if (iName.value=="") {
        msg+='You must enter your name';
        iName.focus();
        iName.style.color="#FF0000";
        result = false;
    } else if (iSubject.value=="") {
        msg+=' You must enter the subject';
        iSubject.focus();
        iSubject.style.color="#FF0000";
        result = false;
    } else if (iExamNumber.value=="" || !/^\d{4}$/.test(iExamNumber.value)) {
        msg+=' You must enter a valid examination number';
        iExamNumber.focus();
        iExamNumber.style.color="#FF0000";
        result = false;
    } else if(!checkEntry()) {
        msg+=' You must select a level';
        result = false;
    } else {
        var cfm = confirm("You have selected " + checkEntry() + ". Are you sure to punish yourself?");
        if (!cfm) {
            result = false;
        }
    }

    if (!result && msg != "") alert (msg);
    return result;
}

function checkEntry() {
    for (var i=0; i<iLevel.length; i++) {
        if (iLevel[i].checked) {
            return iLevel[i].value.toUpperCase();
        }
    }
    return false;
}

function resetForm() {
    form.reset();
    iName.style.color="#000000";
    iSubject.style.color="#000000";
    iExamNumber.style.color="#000000";
}

form.onsubmit = validateForm;
form.onreset = resetForm;