JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<h1>Exam Entry Form</h1>

<form name="ExamEntry" method="post">

<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="examno">examno</td>
<td><input type="number" name="examno" /></td>
</tr>


<tr>
<td><input type="button" name="Submit" value="Submit" onclick="validateForm()" /></td>
<td><input type="button" name="Reset" value="Reset" /></td>
</tr>

</table>
    
</form>

<div id="errorMessage">1</div>

JavaScript

function validateForm() {
    var result = true;
    var msg = "";

    if (document.ExamEntry.name.value == "") {
        msg += "You must enter your name<br />";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color = "red";
        result = false;
    } else {
        document.getElementById('name').style.color = "black";
    }        
    if (document.ExamEntry.subject.value == "") {
        msg += "You must enter the subject<br />";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color = "red";
        result = false;
    } else {
        document.getElementById('subject').style.color = "black";
    }    
    if (document.ExamEntry.examno.value == "") {
        msg += "You must enter your exam number<br />";
        document.ExamEntry.examno.focus();
        document.getElementById('examno').style.color = "red";
        result = false;
    } else {
        document.getElementById('examno').style.color = "black";
    }    
    if (document.ExamEntry.examno.value.length != 4) {
        msg += "The exam number must equal 4<br />";
        document.ExamEntry.examno.focus();
        document.getElementById('examno').style.color = "red";
        result = false;
    } else {
        document.getElementById('examno').style.color = "black";
    }    
    if (msg == "") {
        document.getElementById('errorMessage').innerHTML = "Success!";
        return result;
    } else {
        document.getElementById('errorMessage').innerHTML = msg;
        return result;
    }
}