JavaScript/formvalid.html at main · meetmistry28/JavaScript · 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
<!DOCTYPE html>
<html>

<head>
    <title>JavaScript Form validation</title>
    <style>
        .error {
            color: red;
            font-size: 90%;
        }
    </style>
</head>

<body>
    <form name="contactForm" onsubmit="return validateForm()" action="/examples/actions/confirmation.php" method="post">
        <h2>Application Form</h2>
        <div class="row">
            <p>Full Name</p>
            <input type="text" name="name">
            <span class="error" id="nameErr"></span>
        </div>
        <div class="row">
            <p>Email Address</p>
            <input type="text" name="email">
            <span class="error" id="emailErr"></span>
        </div>
        <div class="row">
            <p>Mobile Number</p>
            <input type="text" name="mobile">
            <span class="error" id="mobileErr"></span>
        </div>
        <div class="row">
            <p>Country</p>
            <select name="country">
                <option value="0">Select</option>
                <option value="au">Australia</option>
                <option value="in">India</option>
                <option value="us">United States</option>
                <option value="uk">United Kingdom</option>
            </select>
            <span class="error" id="countryErr"></span>
        </div>
        <div class="row">
            <p>Gender</p>
            <span class="error" id="genderErr"></span>
            <div class="form-inline">
                <p><input type="radio" name="gender" value="male"> Male</p>
                <p><input type="radio" name="gender" value="female"> Female</p>
            </div>

        </div>
        <div class="row">
            <p>Hobbies <i>(Optional)</i></p>
            <span class="error" id="hobbyErr"></span>
            <div class="form-inline">
                <p><input type="checkbox" name="hobbies" value="sports"> Sports</p>
                <p><input type="checkbox" name="hobbies" value="movies"> Movies</p>
                <p><input type="checkbox" name="hobbies" value="music"> Music</p>
            </div>
        </div>
        <div class="row">
            <input type="submit" value="Submit">
        </div>
    </form>

    <script src="js/formvalid.js"></script>
</body>

</html>