https://whale-app-6m5a4.ondigitalocean.app/components/Validation.js

1import {
2  resizeIframe,
3  submitButton,
4  propertyValue,
5  state,
6  isObjectEmpty,
7  companyResults,
8  fieldsArray,
9} from "../common.js";
10
11let errorsArray = [];
12
13function isValidEmail(email) {
14  // Regular expression for a simple email validation
15  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
16  return emailRegex.test(email);
17}
18
19export const addEventToFields = () => {
20  fieldsArray.forEach((field) => {
21    //console.log(field.field);
22    const input = document.getElementById(field.field);
23    //console.log(input);
24    if (field.field !== "describeloanpurpose") {
25      input.addEventListener("blur", () => {
26        input.value = input.value.trim();
27        console.log(input.value + "|");
28        validateField(field.field);
29        input.value = input.value.trim();
30        if (input.id === "propertyaddress") {
31          if (isFieldError(input)) {
32            input.value = "";
33          }
34        }
35      });
36
37      if (input.type === "select-one" || input.type === "checkbox") {
38        input.addEventListener("change", () => {
39          validateField(field.field);
40        });
41      }
42
43      if (input.id === "propertyaddress") {
44        input.addEventListener("focus", () => {
45          if (isFieldError(input)) {
46            input.value = "";
47          }
48        });
49      }
50
51      if (input.id === "mobilenumber") {
52        input.addEventListener("input", (e) => {
53          if (isFieldError(input)) {
54            if (input.value.length === 11) {
55              removeErrorFromField(input);
56            }
57          }
58        });
59      }
60    }
61  });
62};
63
64export const highlightErrors = (data) => {
65  data.forEach((formField) => {
66    validateField(formField.field, true);
67  });
68
69  if (errorsArray.length === 0) {
70    return true;
71  } else {
72    handleSubmitButton();
73    resizeIframe();
74    document
75      .getElementById(errorsArray[0].field)
76      .parentElement.parentElement.scrollIntoView({
77        behavior: "smooth",
78        block: "start",
79      });
80    return false;
81  }
82};
83
84export function validateField(fieldId, isSubmitting = false) {
85  const field = document.getElementById(fieldId);
86  const errorElement = document.getElementById(`${fieldId}error`);
87  console.log("validate called: ", fieldId);
88
89  // Example validation for the "title" field (you can adapt it for other fields)
90  if (fieldId === "title") {
91    if (field.value.length > 4 || !/^[a-zA-Z]+$/.test(field.value)) {
92      addErrorToField(field);
93    } else {
94      removeErrorFromField(field);
95    }
96    handleSubmitButton();
97  }
98
99  if (fieldId === "firstname") {
100    if (field.value.length < 2 || !/^[a-zA-Z]+$/.test(field.value)) {
101      addErrorToField(field, "Invalid First Name");
102    } else {
103      removeErrorFromField(field);
104    }
105    handleSubmitButton();
106  }
107
108  if (fieldId === "lastname") {
109    if (field.value.length < 2 || !/^[a-zA-Z]+$/.test(field.value)) {
110      addErrorToField(field);
111    } else {
112      removeErrorFromField(field);
113    }
114    handleSubmitButton();
115  }
116
117  // Example validation for the "fname" field (you can adapt it for other fields)
118  if (fieldId === "email") {
119    if (!isValidEmail(field.value)) {
120      addErrorToField(field);
121    } else {
122      removeErrorFromField(field);
123    }
124    handleSubmitButton();
125  }
126
127  if (fieldId === "mobilenumber") {
128    if (field.value.length < 11 || !/^\d{11}$/.test(field.value)) {
129      addErrorToField(field);
130    } else {
131      removeErrorFromField(field);
132    }
133    handleSubmitButton();
134  }
135
136  if (fieldId === "amountrequired") {
137    if (field.value == null || field.value === "") {
138      addErrorToField(field);
139    } else {
140      removeErrorFromField(field);
141    }
142    handleSubmitButton();
143  }
144
145  if (fieldId === "purposeofloan") {
146    if (field.value == null || field.value === "") {
147      addErrorToField(field);
148    } else {
149      removeErrorFromField(field);
150    }
151    handleSubmitButton();
152  }
153
154  if (fieldId === "propertytype") {
155    if (field.value == null || field.value === "") {
156      addErrorToField(field);
157    } else {
158      removeErrorFromField(field);
159    }
160    handleSubmitButton();
161  }
162
163  if (fieldId === "propertyaddress") {
164    if (isSubmitting) {
165      if (
166        field.value == null ||
167        field.value === "" ||
168        isObjectEmpty(state.securityPropertyAddress) ||
169        state.securityPropertyAddress.formattedAddress == null
170      ) {
171        addErrorToField(field);
172        console.log("Property is Error");
173        console.log("PROPERETY: ", state.securityPropertyAddress);
174      } else {
175        removeErrorFromField(field);
176        console.log("property is not error");
177        field.value = state.securityPropertyAddress?.formattedAddress;
178        console.log(state.securityPropertyAddress.formattedAddress);
179      }
180      handleSubmitButton();
181    } else {
182      setTimeout(() => {
183        if (
184          field.value == null ||
185          field.value === "" ||
186          isObjectEmpty(state.securityPropertyAddress)
187        ) {
188          addErrorToField(field);
189          console.log("Property is Error");
190          console.log("PROPERETY: ", state.securityPropertyAddress);
191        } else {
192          removeErrorFromField(field);
193          console.log("property is not error");
194          field.value = state.securityPropertyAddress?.formattedAddress;
195          console.log(state.securityPropertyAddress.formattedAddress);
196        }
197        handleSubmitButton();
198      }, 260);
199    }
200  }
201
202  if (fieldId === "propertyvalue") {
203    let value = propertyValue.value;
204    // Call the validateEmail function and store the result
205    value = value.replace(/\,/g, "");
206    value = Number(value);
207    console.log("TEST: ", value);
208
209    if (value < 100000 || /^[a-zA-Z]+$/.test(field.value)) {
210      addErrorToField(field);
211    } else {
212      removeErrorFromField(field);
213    }
214    handleSubmitButton();
215  }
216
217  if (fieldId === "propertydebt") {
218    if (field.value == null || field.value === "") {
219      addErrorToField(field);
220    } else {
221      removeErrorFromField(field);
222    }
223    handleSubmitButton();
224  }
225
226  if (fieldId === "firstmortgage") {
227    if (/^[a-zA-Z]+$/.test(field.value)) {
228      addErrorToField(field);
229    } else {
230      removeErrorFromField(field);
231    }
232    handleSubmitButton();
233  }
234
235  if (fieldId === "secondmortgage") {
236    if (/^[a-zA-Z]+$/.test(field.value)) {
237      addErrorToField(field);
238    } else {
239      removeErrorFromField(field);
240    }
241    handleSubmitButton();
242  }
243
244  if (fieldId === "othercharges") {
245    if (/^[a-zA-Z]+$/.test(field.value)) {
246      addErrorToField(field);
247    } else {
248      removeErrorFromField(field);
249    }
250    handleSubmitButton();
251  }
252
253  if (fieldId === "companyname") {
254    if (isSubmitting) {
255      companyResults.innerHTML = "";
256      companyResults.style.display = "none";
257      if (
258        field.value == null ||
259        field.value === "" ||
260        isObjectEmpty(state.company)
261      ) {
262        addErrorToField(field);
263      } else {
264        removeErrorFromField(field);
265        field.value = state.company?.title;
266      }
267      handleSubmitButton();
268    } else {
269      setTimeout(() => {
270        companyResults.innerHTML = "";
271        companyResults.style.display = "none";
272        if (
273          field.value == null ||
274          field.value === "" ||
275          isObjectEmpty(state.company)
276        ) {
277          addErrorToField(field);
278        } else {
279          removeErrorFromField(field);
280          field.value = state.company?.title;
281        }
282        handleSubmitButton();
283      }, 260);
284    }
285  }
286
287  if (fieldId === "bankaccount") {
288    if (field.checked === false) {
289      addErrorToField(field);
290    } else {
291      removeErrorFromField(field);
292    }
293    handleSubmitButton();
294  }
295
296  if (fieldId === "property") {
297    if (field.checked === false) {
298      addErrorToField(field);
299    } else {
300      removeErrorFromField(field);
301    }
302    handleSubmitButton();
303  }
304
305  resizeIframe();
306}
307
308const addErrorToField = (field) => {
309  const errorElement = document.getElementById(`${field.id}error`);
310
311  console.log("Error found in: " + field.id);
312
313  fieldsArray.forEach((input, index) => {
314    if (input.field === field.id) {
315      if (!errorsArray.includes(fieldsArray[index])) {
316        errorsArray.push(fieldsArray[index]);
317      }
318      errorElement.textContent = input.message;
319      errorElement.style.display = "block";
320
321      //errorHeader.innerHTML += `<li> ${input.message}</li>`;
322    }
323  });
324
325  // if (errorsArray.length > 0) {
326  //   errorHeader.style.display = "flex";
327  // }
328
329  console.log("ERROR ARRAY AFTER ADD: ", errorsArray);
330
331  //errorElement.style.display = "inline-block";
332  field.classList.remove("input-success");
333  field.classList.add("input-error");
334};
335
336const removeErrorFromField = (field) => {
337  const errorElement = document.getElementById(`${field.id}error`);
338  if (errorsArray.length > 0) {

339    errorsArray = errorsArray.filter((input) => field.id !== input.field);
340  }
341  console.log("ERROR ARRAY AFTER REMOVE: ", errorsArray);
342
343  errorElement.textContent = "";
344  errorElement.style.display = "none";
345
346  field.classList.add("input-success");
347  field.classList.remove("input-error");
348  handleSubmitButton();
349};
350
351const handleSubmitButton = () => {
352  // Enable/disable submit button based on errors
353  const hasErrors = errorsArray.length > 0 ? true : false;
354  submitButton.disabled = hasErrors;
355  if (hasErrors) {
356    submitButton.textContent = "Please Fix Your Errors";
357    // errorHeader.style.display = "inline-block";
358  } else {
359    submitButton.textContent = "Submit";
360    //errorHeader.style.display = "none";
361  }
362};
363
364const isFieldError = (field) => {
365  return errorsArray.some((error) => field.id === error.field);
366};