JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<form action="http://yahoo.com/" method="post" id="myForm" name="myForm">
    <fieldset>
        <legend>個人情報</legend>
    your name: <br>
    <input type="text" name="name" id="yourName"><br>
    your email:<br>
    <input type="email" name="email" id="yourEmail"><br>
    </fieldset>
        <p id="errorMsg"></p>
        <button type="submit">送信する</button>
</form>

CSS

#errorMsg {
    color: red;
}

JavaScript

function prepareEventHandler() {
    document.getElementById('myForm').onsubmit = function() {
        if(document.getElementById('yourEmail').value == '') {
            document.getElementById('errorMsg').innerHTML = '※emailが空ですよ';
            return false;
        } else {
            document.getElementById('errorMsg').innerHTML = '';
            return true;
        }
    };
}

window.onload = function() {
    prepareEventHandler();
};