JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8" />
<link href="style.css" type="text/css" rel="stylesheet">
    <title>Java Form</title>
 
    </head>
<body>
<form id="my-form" name="myForm" action="#">
<label for="name">Name:</label>
    <input type="tex" name="name"><br/>
<label>Hobbies:</label><br/>
<input type="checkbox" name="biking" value="biking">biking<br/>
<input type="checkbox" name="skiing" value="skiing">Skiing<br/>
<input type="checkbox" name="driving" value="driving">Driving<br/>
<label for="colour">Fav Colour:</label>
<select name="colour">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
    </select>
    <input type="submit" name="submit" value="submit">
</form>        
   
<div id="message" style="color:red;"></div>
    
<script scr="one.js"></script>
</body> 
</html>

JavaScript

var myForm = document.forms.myForm;
var message =  document.getElementById("message");


myForm.onsubmit = function(){
    
    
    if(myForm.name.value == ""){
        
    message.innerHTMl = "U Must Write A Name";
    return false;
        
    } else{
        message.innerHTMl = "";
        return true;
        
    }
      
};