Skip to content

D
dia006
Switch branch/tag
Find file
Normal viewHistoryPermalink
eje3.html 1.92 KB
Newer Older
dia 6
bdddb4d5
 
Joel Florentin committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js ex3</title>
    <style>
        .errormsg{
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <form action="mailto:me@fakeemail.com">
        <fieldset>
            <legend>Personal details</legend>
            <p>
                <label for="">
                    Full name:
                    <input type="text" name="fullname" id="fullname">
                </label>
            </p>
            <p class="errormsg hide" id="nameerrormsg">Please enter your name above</p>
            <p>
                <label for="">
                    Street adrress:
                    <input type="text" name="streetaddr" id="streetaddr">
                </label>
            </p>
            <p class="errormsg hide" id="addrerrormsg">Please enter your address above</p>
        </fieldset>
        <input type="submit" value="Submit it!">
    </form>
    <script>
        form = document.querySelector("form");
        function checkForm(){
            let fullname = document.querySelector("#fullname");
            if(fullname.value.trim().length == 0){
                document.querySelector("#nameerrormsg").classList.remove("hide");
            }
            else{
                document.querySelector("#nameerrormsg").classList.add("hide");
            }
            let street = document.querySelector("#streetaddr");
            if(street.value.trim().length == 0){
                document.querySelector("#addrerrormsg").classList.remove("hide");
            }
            else{
                document.querySelector("#addrerrormsg").classList.add("hide");
            }
            
        }
        form.addEventListener("submit",checkForm)

    </script>
</body>
</html>