basics_forms/forms_validation.html at main · YASHSHAH68/basics_forms · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forms Practical</title>
</head>
<body>

    <style>
        .container{
            width: 200px;
            height: 200px;
        }
    </style>


        <form name="myform" onsubmit=" return formvalidation()">

            <label for="firstname">First Name : </label>
                <input type="text" name="fname" id="firstname" placeholder="Enter First Name"></br>
                <span id="fname-errors" style="color: red;"></span>

            <br><label for="lastname">Last Name : </label>
            <input type="text" name="lname" id="lastname" placeholder="Enter Last Name"><br>
            <span id="lname-errors" style="color: red;"></span>

            <br><label for="phonenumber">Phone Number : </label>
                <input type="tel" name="phoneno" id="phonenumber" placeholder="Enter Phone Number"><br>
                <span id="phoneno-errors" style="color: red;"></span>

            <br><button type="submit">Click Here For Printing the details </button>
            <p id="demo"></p>
            <p id="demo1"></p>
            <p id="demo2"></p>

        </form>

        <label for="demofield">Demo Field : </label>
        <br><input type="text" name="demofield" id="defield" placeholder="Enter Demo Data">

    <script>

        function formvalidation()
        {
            let isValid = true;

            const fname = document.getElementById('firstname').value;
            const lname = document.getElementById('lastname').value;
            const phoneno = document.getElementById('phonenumber').value;

            document.getElementById('fname-errors').textContent = '';
            document.getElementById('lname-errors').textContent = '';
            document.getElementById('phoneno-errors').textContent = '';
            document.getElementById('demo').innerHTML = '';
            document.getElementById('demo1').innerHTML = '';
            document.getElementById('demo2').innerHTML = '';

            if (fname === '')
            {
                document.getElementById('fname-errors').textContent = "Required Field";
                isValid = false;
            }

            if (lname === '')
            {
                document.getElementById('lname-errors').textContent = "Required Field";
                isValid = false;
            }

            if (fname !== '' && lname !== '' && fname === lname)
            {
                document.getElementById('fname-errors').textContent = "Both FirstName and LastName cannot be same";
                document.getElementById('lname-errors').textContent = "Both FirstName and LastName cannot be same";
                isValid = false;
            }

            if (phoneno === '')
            {
                document.getElementById('phoneno-errors').textContent = "Required Field";
                isValid = false;

            }

            else if (isNaN(phoneno) || phoneno.length !== 10)
            {
                document.getElementById('phoneno-errors').textContent = "Invalid Number Format";
                isValid = false;
            }

            if (!isValid)
            {
                return false;
            }

            // const fieldnames = ["First Name " , "Last Name" , "Phone Number"];
            // const x = document.getElementsByTagName('input');
            // // const labels = document.getElementsByTagName('label');
            // let result = "<h3>Form Values</h3>";

            // for (let i = 0; i < x.length; i++)
            // {
            //     // result += "<h3>" + labels[i].innerText + x[i].value + "<br>";
            //     result += "<h3>" + fieldnames[i] + ": "+ x[i].value + "<br>";
            // }

            // document.getElementById('demo').innerHTML = result;

            document.getElementById('demo').innerHTML = "First Name : " + fname
            document.getElementById('demo1').innerHTML = "Last Name : " + lname
            document.getElementById('demo2').innerHTML = "Phone Number : " + phoneno

            return false;
        }

    </script>
</body>
</html>