JSFiddle - React, Tailwind, and code Playground

Form validation practice

by Jennifer Perrin

HTML

<form method="post" action="">
    <label for="name">Name</label>
    <input id="name" type="text" required>
    <label for="email">Email</label>
    <input id="email" type="email" required>
    <label for="message">Message</label>
    <textarea id="message" required></textarea>
    <input id="submit" type="submit" value="Submit">
</form>

CSS

body {
    font-size: 100%;
    padding: 1.5em 3em;
}
form label,
form input,
form textarea {
    color: #444;
    display: block;
    width: 25em;
    -webkit-box-sizing: border-box;
}
form label {
    font: bold 1em/1.5 sans-serif;
    padding: 1em 0;
}
form label:after {
    content: ':';
}
form label[for] {
    cursor: pointer;
}
form input,
form textarea {
    border: 1px solid #aaa;
    box-shadow: 0 0 0 1.5em #eee,
                0 -2em 0 1.5em #eee;
    font: bold 1em/1.5 sans-serif;
    margin-bottom: 3em;
    padding: .5em;
}
form input:focus,
form textarea:focus {
    border-color: #6cf;
    box-shadow: 0 0 0 1.5em #def,
                0 -2em 0 1.5em #def ;
    outline: none;
}
form textarea {
    min-height: 6em;
    resize: vertical;
}
form input[type="submit"] {
    background: #eee;
    border: none;
    box-shadow: none;
    cursor: pointer;
    margin: 0 -1.5em;
    padding: 1em 0;
    position: relative;
    width: 28em;
}
form input[type="submit"]:hover,
form input[type="submit"]:focus {
    background: #def;
}
form input[type="submit"]:active {
    top: 1px;
}
form p.alert {
    background: #ff9;
    color: #444;
    display: none;
    font: bold 1em/1.5 sans-serif;
    margin: 0 -1.5em 1.5em;
    padding: 1em 1.5em;
    text-align: center;
    width: 25em;
}

JavaScript

$('#submit').click( function() {
    $(this).before('<p class="alert">Please fill out all required fields.</p>');
    if($('#name').val() == '' && $('p.alert').css('display') == 'none') {
        $('#name').css({'box-shadow': '0 0 0 1.5em #ff9, 0 -2em 0 1.5em #ff9',
                        'border-color': '#fc6'});
        $('form p').slideDown();
    }
});