jsFormValidationDrill

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
</head>
<body>
    <form name="nameForm" id="nameForm" >
        <lable for="fname">First name</lable>
        <div class="inputdiv">
            <input type="text" id="fname" name="fname" value="Bill" required>
        </div>
        <lable for="sname">Second name</lable>
        <div class="inputdiv">
            <input type="text" id="sname" name="sname" value="Gates">
        </div>
        <lable for="gender">Gender</lable>
        <div class="inputdiv">
            <input type="text" id="gender" name="gender" value="man" pattern="man|woman">
        </div>

        <lable for="idCode">ID Code</lable>
        <div class="inputdiv">
            <input type="text" id="idCode" name="idCode" value="12.34" pattern="\d{2}\.\d{2}">
        </div>
        <input id="inputSubmit" type="submit">
        <!--<button id="testFormSubmit" type="submit">Send!</button>-->
        <!--<h1 id="post">POST FORM!</h1>-->
    </form>

    <!--<form name="testForm" id="testForm">
        <label for="chb1">Test Chb1</label>
        <input type="checkbox" id="chb1" value="testChb1">
        <label for="chb2">Test Chb2</label>
        <input type="checkbox" id="chb2" value="testChb2" checked>
        <label for="chb3">Test Chb3</label>
        <input type="checkbox" id="chb3" value="testChb3">

        <label for="r1">"Fixed Rate"</label>
        <input type="radio" id="r1" name="rate1" value="Fixed Rate">
        <label for="r2">"Variable Rate"</label>
        <input type="radio" id="r2" name="rate2" value="Variable Rate">
        <label for="r3">"Multi Rate"</label>
        <input type="radio" id="r3" name="rate3" value="Multi Rate" checked="checked">

        <select id="rates">
            <option value="FR">Fixed Rate</option>
            <option value="VR">Variable Rate</option>
            <option value="MR">Multi Rate</option>
        </select>
    </form>-->
    <script>
        'use strict'
        const form = document.getElementById('nameForm');
        const idCode = document.getElementById('idCode');

        idCode.addEventListener('change', (event) => {
            let elem = event.target;
            let val = elem.value;

            console.log(elem.validity.valid);
            console.log(val);

            if (!elem.validity.valid) {
                elem.setCustomValidity(`${elem.id} is BAAD!`);
            }
        });
                    //const hPost = document.getElementById('post');

        form.addEventListener('submit', (event) => {
            console.log('Try to submit form!'); event.preventDefault();
            for (let elem of form.elements) {
                console.log(`${elem.id} is valid: ${elem.validity.valid}`);


            }
        });
                    //form.addEventListener('click', (event) => {
                    //    console.log(`click occured at -> ${event.target.id}`);
                    //});

                    //hPost.addEventListener('click', (event) => {
                    //    form.submit();
                    //});
    </script>
</body>
</html>