JSFiddle - React, Tailwind, and code Playground

by John Brown

HTML

<form onsubmit="return formValidate()" action="mailto:[email protected]" method="post" id="contactForm">
    <fieldset>
        <dl> <dt> First Name:</dt>

            <dd>
                <input class="input" type="text" name="fname" id="fname" onblur="Validate(this)" />
            </dd> <dt> Last Name:</dt>

            <dd>
                <input class="input" type="text" name="lname" id="lname" onblur="Validate(this)" />
            </dd> <dt> Email Address:</dt>

            <dd>
                <input class="input" type="text" name="email" id="email" onblur="Validate(this)" />
            </dd> <dt> Email Address:</dt>

 <dt> Message:</dt>
            
            <dd>
                <textarea name="message" id="message" rows="10" cols="25" onblur="Validate(this)"></textarea>
            </dd>
            <dd>
                <input type="submit" value="submit" name="submit" />
            </dd>
        </dl>
    </fieldset>
</form>

JavaScript

function Validate(elem) {
    // create array containing textbox elements
    var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email'), document.getElementById('message')];

    for (var i = 0; i < input.length; i++)
    // loop through each element to see if value is empty
    {
        if (input[i].value == '' && elem.id == input[i].id) {
            switch (input[i].id) {

                case 'fname':
                    alert('enter you first name');
                    break;
                case 'lname':
                    alert('enter your last name');
                    break;
                case 'email':
                    alert('enter your email address');
                    break;
                case 'message':
                    alert('write your message');
                    break;
            }

            elem.focus();
        }
    }
}