Skip to content

B
BootcampWebDia6
Switch branch/tag
Find file
Normal viewHistoryPermalink
JsDomEj3.html 1.56 KB
Newer Older
Js Ejercicio 3
e93645af
 
Cesar Giulano Gonzalez Maqueda 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 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio 3</title>
    <style>
        .errormsg{
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <form action="mailto:me@fakeemail.com" id="formx">
        <fieldset>
            <legend>Personal details</legend>
            <p>
                <label>
                    Full name:
                    <input type="text" name="fullname" id="fullname">
                </label>
            </p>
            <p class="errormsg" id="nameerrormsg">Please enter your name above</p>
            <p>
                <label>
                    Street Address:
                    <input type="text" name="streetaddr" id="streetaddr">
                </label>
            </p>
            <p class="errormsg" id="addrerrormsg">Please enter your street
                address</p>
        </fieldset>
        <input type="submit" value="Submit it!">
    </form>
</body>
<script>
    document.querySelector('#formx').addEventListener('submit', ()=>{
        const nameError = document.querySelector('#nameerrormsg');
        const streetError = document.querySelector('#addrerrormsg');
        if(document.querySelector('#fullname').value === ""){
            nameError.style.display = 'block';
        }else{
            nameError.style.display = 'none';
        }
        if(document.querySelector('#streetaddr').value === ""){
            streetError.style.display = 'block';
        }else{
            streetError.style.display = 'none';
        }
    });
</script>
</html>