learnJS/tut7.html at master · robertmoga/learnJS · 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
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Javascript Regular Expressions, Form Validation and Event Handlers</title>
    <script type="text/javascript">

        function editNodeText(regex, input, helpId, helpMessage) {        // See if the visitor entered the right information

            if (!regex.test(input)) {          // If the wrong information was entered, warn them

                if (helpId != null)

                    while (helpId.firstChild) // Remove any warnings that may exist

                        helpId.removeChild(helpId.firstChild);

                helpId.appendChild(document.createTextNode(helpMessage)); // Add new warning

                return false;

            }

            else {          // If the right information was entered, clear the help message

                if (helpId != null) {

                    while (helpId.firstChild) // Remove any warnings that may exist

                        helpId.removeChild(helpId.firstChild);

                }

                return true;

            }
        }

        function isTheFieldEmpty(inputField, helpId) {       	// inputField – ID Number for the html text box

            // helpId – ID Number for the child node I want to print a warning in

            // See if the input value contains any text

            return editNodeText(/^[A-Za-z\.\’ \-]{2,15}\s?[A-Za-z\.\’ \-]{2,15}\s?[A-Za-z\.\’ \-]{2,15}/, inputField.value, helpId, "Please enter a valid name.");

        }            	// inputField.value – Value typed in the html text box

        function isAddressOk(inputField, helpId) {        // See if the input value contains any text

            return editNodeText(/^[A-Za-z0-9\.\’ \-]{5,30}$/, inputField.value, helpId, "Enter a Street(Ex.1234 Main St.) ");

        }

        function isStateOk(inputField, helpId) {        // See if the input value contains any text
            alert("Entered state");
            return editNodeText(/^A[LKSZRAEP]|C[AOT]|D[EC]|F[LM]|G[AU]|HI|I[ADLN]|K[SY]|LA|M[ADEHINOPST] | N[CDEHJMVY] | O[HKR] | P[ARW] | RI | S[CD] | T[NX] | UT | V[AIT] | W[AIVY]$/ , inputField.value, helpId, "Enter a State Code in Uppercase(Ex.NY, PA, CA) ");

        }

        function isPhoneOk(inputField, helpId) {        // See if the input value contains any text

            return editNodeText(/^([0-9]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})$/, inputField.value, helpId, "Enter a Phone Number(Ex.412 - 828 - 3000) ");

        }

        function isEmailOk(inputField, helpId) {        // See if the input value contains any text

            return editNodeText(/^[A-Za-z0-9._-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/, inputField.value, helpId, "Enter an Email(Ex.derekbanas@newthinktank.com) ");

        }

    </script>

</head>

<body>
        Enter your street name:
        <input id="name" name="name" type="text" size="30" onblur="isTheFieldEmpty(this, document.getElementById('name_help'))"/>
        <span id="name_help"></span>
        <!–- this is the id number for the text box -–>
    <div> Enter your street address:
        <input id="street" name="street" type="text" size="30" onblur="isAddressOk(this, document.getElementById('street_help'))"
        />
        <span id="street_help"></span>
    </div>
    <div> Enter your city:
        <input id="city" name="city" type="text" size="30" onblur="isTheFieldEmpty(this, document.getElementById('city_help'))"
        />
        <span id="city_help"></span>
    </div>
    <div> Enter your state code:
        <input id="state" name="state" type="text" size="2"  onblur="isStateOk(this, document.getElementById('state_help'))"/>
        <span id="state_help"></span>
    </div>
    <div> Enter your phone number:
        <input id="phone" name="phone" type="text" size="15" onblur="isPhoneOk(this, document.getElementById('phone_help'))"
        />
        <span id="phone_help"></span>
    </div>

    <div> Enter your email:

        <input id="email" name="email" type="text" size="30" onblur="" />
        <span id="email_help"></span>
    </div>
    <div> Click Button for a 3 Second Alarm:
        <input id="alarm" name="alarm" type="button" value="Set Alarm" onclick="setTimeout('alert(\'3seconds!\')',3000)" /> </div>
</body>

</html>