Form_Validation_using-Regex_in-JS/index.html at master · Ashokav008/Form_Validation_using-Regex_in-JS · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Welcome 24x7 IT solns</title>
</head>

<body>
    <div class="alert alert-success fade m-2 collapse" id="alert" role="alert">
        Your form has been submitted sucessfully!
    </div>
    <div class="container my-4">

        <!-- <div class="alert alert-success alert-dismissible fade collapse " role="alert">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div> -->


        <h1 style="margin-left: 17%; text-decoration: underline;">24x7 IT Solutions-Application Form</h1>

        <div class="mb-3 my-2">
            <label for="Name" class="form-label">Name</label>
            <input type="text" class="form-control " id="name" value="" placeholder="Enter your name">
            <div id="mono-Valid" class="invalid-feedback">
                Please Provide a valid Username .It must start with letter and 5-15 characters long
            </div>
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input type="text" class="form-control" id="email" placeholder="Enter ur mail">
            <div id="mono-Valid" class="invalid-feedback">
                Please Provide a valid Email.It should starts with a letter and must contains . and @ .
            </div>
        </div>
        <div class="mb-3">
            <label for="mono" class="form-label">Mobile no</label>
            <input type="text" class="form-control" id="mono" placeholder="Enter your mobile no.">
            <div id="mono-Valid" class="invalid-feedback">
                Please Provide a valid 10 digit Mobile no
            </div>
        </div>
        <label for="Name" class="form-label">Select Gender</label>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="male">
            <label class="form-check-label" for="male">
             Male
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="female">
            <label class="form-check-label" for="female">
              Female
            </label>
        </div>


        <div class="mb-3">
            <label for="experience" class="form-label">Your Exerience and Skills</label>
            <textarea class="form-control" id="experence" rows="3" placeholder="Enter your exerience and skills"></textarea>
        </div>
        <div class="col-12">
            <div class="form-check">
                <input class="form-check-input " type="checkbox" value="" id="terms">
                <label class="form-check-label" for="terms">
                Agree to terms and conditions
              </label>
            </div>
            <div id="invalidCheck3Feedback" class="invalid-feedback">
                You must agree before submitting.
            </div>
        </div>
        <div class="col-12 my-3">
            <button class="btn btn-primary disabled" value="Submit" type="submit" id="submit">Submit </button>
        </div>


    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
    <script src="index.js"></script>
</body>

</html>