JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<h1>Search</h1>
<div id="errorMessage"></div>
<form id = "form" 
   action="ExamSearchSubmit.php" 
   onmouseover="mOver(this)"
   onmouseout="mOut(this)"
   onsubmit="return mOnSubmit()"
   method="post">

<div>
          <label for="name">Full Name</label><input id="name" type="text" value="" name="http://jsfiddle.net/Exceeder/ahh4y1tr/#runname"/>
          </div>
          <div>
    <label for="atomicnum">Show atomic number</label><input id="atomicnum" type="checkbox" checked=""/>
          </div>
          <div>
    <input type="submit" value="Search Elements"/>
          </div>
</form>

CSS

form {background-color: #878787; padding: 10px; display:inline-block;}

#errorMessage { color:red; }

#name {
    width: 200px
}

label {width:200px; display: inline-block;}

form div {
    margin-top: 10px;
    margin-bottom: 10px;
}

JavaScript

function mOnSubmit()
{
    return checkName();

    function checkName() {
        var input = document.getElementById("name");
        var name = input.value;        
        if (!name || name == '') {
            showMessage("please enter a name");
            return false;
        }
        else {
            showMessage(""); //remove any error messages if all is ok
            return true;
        }
    }   
}

function showMessage(msg) {   
    document.getElementById('errorMessage').innerHTML=msg;
}

function mOver(el) {
    el.style.background="#cccccc";
}


function mOut(el) {
    el.style.background="#878787";
}