JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title>Form</title>
</head>
<body>
<h1>Form</h1>
<form name="Entry" 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">Age</td>
<td><input type="text" name="age" id="age" /></td>
</tr>
<tr>
<td id=”number”>Number</td>
<td><input type="text" name="number" id="number"/></td>
</tr>
<tr>
<td><button onclick="validateForm();" id="submit_btn" type="button" name="Submit" value="Submit">Submit</button></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
//Assuring page is loaded
document.onload = function(){
validateForm();
};
var validateForm = function() {
var result = true;
var msg="";
var name,age,number;
name = document.getElementsByName("name")[0];
age = document.getElementsByName("age")[0];
number = document.getElementsByName("number")[0];
//Conditionals
if (name.value =="") {
msg+="You must enter your name \n";
name.focus();
name.style.color="red";
result = false;
}
if (age.value=="") {
msg+="You must enter your age \n";
age.focus();
age.style.color="red";
result = false;
}
if (number.value=="") {
msg+="You must enter your number \n";
number.focus();
number.style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg);
return result;
}
};
</script>
</body>
</html>