ValidationEngine/real.html at master · shanewas/ValidationEngine · 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ValidationEngine Test</title>
  </head>
  <body>
    <script src="dist/validation-engine.min.js"></script>
    <!-- Include the minified file -->
    <script>
      // Example usage of the ValidationEngine
      const formData = {
        name: { fieldId: "name", value: "Jo" }, // Too short
        age: { fieldId: "age", value: "20" }, // Valid, but as a string
        email: { fieldId: "email", value: "invalid-email" }, // Invalid format
        phone: { fieldId: "phone", value: "1234567890" }, // Incorrect format
        experience: { fieldId: "experience", value: 3 }, // Valid
        references: { fieldId: "references", value: "" }, // Missing but required
        preferredJobRole: { fieldId: "preferredJobRole", value: "" }, // Missing but required
        coverLetter: { fieldId: "coverLetter", value: "" }, // Missing, not required in this case
      };

      const rules = [
        // Name validation
        {
          type: "REQUIRED",
          fieldId: "name",
          errorMessage: "Name is required.",
        },
        {
          type: "LENGTH_CHECK",
          fieldId: "name",
          minLength: 3,
          maxLength: 50,
          errorMessage: "Name must be between 3 and 50 characters.",
        },

        // Age validation
        {
          type: "REQUIRED",
          fieldId: "age",
          errorMessage: "Age is required.",
        },
        {
          type: "TYPE_CHECK",
          fieldId: "age",
          expectedType: "number",
          errorMessage: "Age must be a number.",
        },
        {
          type: "COMPARISON",
          fieldId: "age",
          operator: "GREATER_THAN_OR_EQUAL",
          value: 18,
          errorMessage: "Age must be at least 18.",
        },

        // Email validation
        {
          type: "REQUIRED",
          fieldId: "email",
          errorMessage: "Email is required.",
        },
        {
          type: "REGEX",
          fieldId: "email",
          value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
          errorMessage: "Invalid email format.",
        },

        // Phone validation
        {
          type: "REQUIRED",
          fieldId: "phone",
          errorMessage: "Phone number is required.",
        },
        {
          type: "REGEX",
          fieldId: "phone",
          value: /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/,
          errorMessage: "Phone number must follow the format xxx-xxx-xxxx.",
        },

        // Experience validation
        {
          type: "REQUIRED",
          fieldId: "experience",
          errorMessage: "Experience is required.",
        },
        {
          type: "TYPE_CHECK",
          fieldId: "experience",
          expectedType: "number",
          errorMessage: "Experience must be a number.",
        },

        // References validation
        {
          type: "DEPENDENCY",
          fieldId: "references",
          dependentFieldId: "experience",
          dependentOperator: "LESS_THAN",
          dependentValue: 5,
          operator: "NOT_EMPTY",
          errorMessage:
            "References are required if experience is less than 5 years.",
        },

        // Preferred Job Role validation
        {
          type: "DEPENDENCY",
          fieldId: "preferredJobRole",
          dependentFieldId: "experience",
          dependentOperator: "GREATER_THAN",
          dependentValue: 2,
          operator: "NOT_EMPTY",
          errorMessage:
            "Preferred Job Role is required for applicants with more than 2 years of experience.",
        },

        // Cover Letter validation
        {
          type: "DEPENDENCY",
          fieldId: "coverLetter",
          dependentFieldId: "experience",
          dependentOperator: "GREATER_THAN",
          dependentValue: 5,
          operator: "NOT_EMPTY",
          errorMessage:
            "Cover Letter is required for applicants with more than 5 years of experience.",
        },
      ];

      const controller = new ValidationEngine.ValidationController();

      controller
        .validateForm(formData, rules)
        .then((result) => {
          if (result.hasErrors) {
            console.error(
              "Validation failed:",
              JSON.stringify(result.details, null, 2)
            ); // Pretty-print the error details
          } else {
            console.log("Validation succeeded!");
          }
        })
        .catch((error) =>
          console.error("Validation encountered an error:", error)
        );
    </script>
  </body>
</html>