lesson-8-form-short

<!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>JavaScript Validation Form</title>

</head>
<body>
    <!-- Header -->
    <header>
        <h1>Oder and Validation From</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, adipisci assumenda eum deleniti provident sapiente magnam enim repellat autem qui.</p>
    </header>


    <!-- Main -->
    <div id="main">
        <!-- Form - Customer Details -->
        <h2>Customer Details</h2>
        <form>
            <label for="fname">First Name*</label>
            <br>
            <input type="text" name="fname" id="fname" placeholder="John" pattern="[A-Za-z]" required>
            <br>

            <label for="phone">Phone Number</label>
            <br>
            <input type="number" name="phone" id="phone" placeholder="012345679" pattern="[0-9]{9}">
            <br>

            <label for="email">Email address*</label>
            <br>
            <input type="email" name="email" id="email" placeholder="john.smith@email.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
            <br>

            <!-- The JavaScript function "validateCustomerDetails()" is called when the submit button clicked. -->
            <button type="button" onclick="validateCustomerDetails()">Submit</button>
            <br>

            <!-- JS -->
            <script>
                // Here the function "validateCustomerDetails()" starts.
                function validateCustomerDetails() {

                    // First we need to save the values from the form into variables.
                    // Find values of relevant elements according theirs IDs and save them in the variables.

                    // Search trough the document and find an element with the ID "fname" and save its value to variable named "var fname".
                    var fname = document.getElementById("fname").value;
                    var phone = document.getElementById("phone").value;
                    var email = document.getElementById("email").value;

                    // Regexr Patterns
                    // Here we storing a correct input formatting for each individual form field.
                    var fNameCheckPattern = /^[a-zA-Z]+$/;
                    var phoneCheckPattern =  /[0-9]{9}/;
                    var emailCheckPattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;

                    // Validation if statements
                    // Here we are checking if the patterns and value from form fields meeting criteria.
                    // Test if variable "fname" is NOT matching the pattern "fNameCheckPattern". If NOT then search entire document and find element with ID "fname" focus on it and display the alert message "Only characters are allowed."
                    if(!fNameCheckPattern.test(fname)) { document.getElementById("fname").focus(); alert("Only characters are allowed."); }

                    else if (!phoneCheckPattern.test(phone)) { document.getElementById("phone").focus(); alert("Only digits are allowed. Example of format: 0132465798"); }

                    else if (!emailCheckPattern.test(email)) { document.getElementById("email").focus(); alert("Input correct email. Example: John.smith@email.com"); }

                    else {
                        // If all the inputs from form field are correct call function named "printCustomerDetails()".
                        printCustomerDetails();
                    }

                    // Output the result
                    // Here we are creating function named "printCustomerDetails()"
                    function printCustomerDetails() {
                        // Search trough entire document and find an element with ID "outputFullName". Once find insert HTML code in it "<b>Full Name: </b>" plus value of the variable "fullName."
                        document.getElementById("outputName").innerHTML = "<b>Name: </b>" + fname;
                        document.getElementById("outputPhone").innerHTML = "<b>Phone: </b>" + phone;
                        document.getElementById("outputEmail").innerHTML = "<b>Email: </b>" + email;
                    }

                }

            </script>
        </form>

        <!-- Form - Expedition Details -->

        <!-- Printed Forms -->
        <div id="print">
            <h2>Your display output</h2>

            <h3>Customer Details</h3>
            <p id="outputName">Full name:</p>
            <p id="outputPhone">Phone:</p>
            <p id="outputEmail">Email:</p>
        </div>

    </div>

</body>
</html>