Ejercicio_003.html 1.88 KB
Newer Older
willgonzz 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
<!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>EJERCICIO_003</title>
    <link href="css/error.css" rel="stylesheet"/>
    <script src="js/check.js"></script>
</head>
<body>
    <form action="mailto:me@fakeemail.com" onsubmit="return checkForm();">
        <fieldset>
            <legend>Personal details</legend>
            <p>
                <label>
                    Full name:
                    <input type="text" name="fullname" id="fullname">
                    </label>
                    </p>
                    <p class="errormsg" id="nameerrormsg" style="color: red;">Please enter your name above</p>
                    <p>
                    <label>
                    Street Address:
                    <input type="text" name="streetaddr" id="streetaddr">
                </label>
            </p>
            <p class="errormsg" id="addrerrormsg" style="color: red;">
                Please enter your streetaddress
            </p>
        </fieldset>
        <input type="submit" value="Submit it!">
    </form>
    <script>
        function checkForm(){
            if(document.getElementById("fullname").value ==""){
                alert("nameerrormsg");
                document.getElementById("fullname").focus();
                if(document.getElementById("streetaddr").value ==""){
                    alert("addrerrormsg");
                    document.getElementById("streetaddr").focus();
                }
                return false;
            }
    
            if(document.getElementById("streetaddr").value ==""){
                alert("addrerrormsg");
                document.getElementById("streetaddr").focus();
                return false;
            }        
        }
        </script>
</body>
</html>