JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<form action="#" type="post">
    <label for="fullName" class="required">Full Name:</label>
    <input id="fullName" name="fullName" type="text" />
    <label for="skin">Skin:</label>
    <input id="skin" name="skin" type="color" />
    <label for="birthday">Birthday:</label>
    <input id="birthday" name="birthday" type="date" />
    <label for="email">Email:</label>
    <input id="email" name="email" type="text" />
    <button type="submit" value="Submit">Submit</button>
    <button type="reset" value="Reset">Reset</button>
</form>

CSS

input {
    display: block;
    margin-bottom: 1em;
}
.required:before {
    content:"*";
    color: red;
}

JavaScript

$("button[type=submit]").click(function(){
    var fn = $("#fullName").val();
    if(fn){
        alert(fn);
        return true;
    }
    alert("Full Name not entered.");
    return false;
});