WebDev/Order.html at master · miniumknight/WebDev · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<head>
    <title>East Midlands Electronics Forms</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type ="text/css" href="css/rfstyle.css">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <div class="navbar" id="responsive">
        <div class="navstyle">
            <img src="img/EME Logo.png">
            <div class="innerNav">
                <a href="./Index.html">Home</a>
                <a href="./Products.html">XML Page</a>
                <a href="./Order.html">Order Form</a>
                <a href="./Slideshow.html">Slide Show</a>
                <a href="./Report.html">Report</a>
            </div>
        </div>
        <a href="javascript:void(0);" class="resIcon" onclick="toggleMobile()">
            <img src="img/Menu Icon.png">
        </a>
    </div>
    <div class="content">
        <div class="mainTextContainer">
            <div class="mainText">
                <h1>Registration</h1>
                <form class="formContainer" onsubmit="SubmitAcc()">
                    <label for="firstName"><h1>First Name</h1></label>
                    <input class="form" type="text" placeholder="First Name" name="firstName" required>

                    <label for="lastName"><h1>Last Name</h1></label>
                    <input class="form" type="text" placeholder="Last Name" name="lastName" required>

                    <label for="email"><h1>Email</h1></label>
                    <input id ="preEmail" class="form" type="email" placeholder="Your Email" pattern="[a-z0-9-]+@[a-z0-9-]+\.[a-z.]{2,}$" name="email" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Invalid email!')" required>

                    <label for="password"><h1>Password</h1></label>
                    <input id="password" class="form" type="password" placeholder="Your Password" pattern="(?=.*\d).{8,}" name="password" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Password must be at least 8 digits long with at least one number!')" required>

                    <label for="passwordRepeat"><h1>Repeat Password</h1></label>
                    <input id="confirmPassword" class="form" type="password" placeholder="Repeat Password" name="passwordRepeat" required>

                    <div class="submitcontainer">
                        <div class="g-recaptcha" data-sitekey="6Lc1KssUAAAAAP4MZBgFOa8O8zw83w1vy3KrtqG-"  data-callback="captchaSuccess"  data-expired-callback="captchaExpiry" data-error-callback="captchaSuccess"></div>

                        <button type="submit" class="submitBtn" onclick="checkMatch();">Register</button>
                    </div>
                </form>
            </div>
            <div class="mainText">
                <h1>Order Form</h1>
                <form class="formContainer">
                    <label for="email"><h1>Email</h1></label>
                    <input id="email" class="form" type="email" placeholder="Your Email" name="email" required>

                    <label for="password"><h1>Password</h1></label>
                    <input id="existingPass" class="form" type="password" placeholder="Your Password" name="password" required>

                    <label for="product"><h1>Desired Product</h1></label>
                    <input class="form" type="text" placeholder="Product Name" name="product" required>

                    <label for="address"><h1>Address</h1></label>
                    <input class="form" type="text" placeholder="1 Jayne St NG13 4HA" pattern="\d{1,5}\s[ ,a-zA-Z]{0,20}\s[ ,A-Z0-9]{1,9}" name="address" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Invalid address or format (Number Street Postcode)')" required>

                    <label for="telephone"><h1>Telephone</h1></label>
                    <input class="form" type="tel" placeholder="07123456789" pattern="[ 0-9]{9,11}" name="telephone" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Invalid telephone number')" required>

                    <div class="submitcontainer">
                        <button type="submit" class="submitBtn" id="last" onclick="checkAcc()">Place Order</button>
                    </div>
                <!--I have used inline js for validation messages on my forms because it is more efficient than creating an individual function for the validation of each input tag or even iterating through the tags to find the correct one-->
                </form>
            </div>
        </div>
        <div class="footer">
            <h3>Website by Ross Fitch. Copyright &copy; 2019, All rights reserved.</h3>
        </div>
    </div>
    <script src="js/rffunctions.js"></script>
    <script src="js/rfparser.js"></script>
</body>