1. /**
  2. * Form Wrapper with Sanity Checks for Routine Automation
  3. *
  4. * Wraps existing form logic and adds basic validation.
  5. *
  6. * @param {object} form - The form object (e.g., from document.getElementById).
  7. * @param {function} originalSubmit - The original submit handler.
  8. * @param {object} validationRules - An object defining validation rules for each field.
  9. * e.g., { fieldName: { type: 'required', pattern: /^\d+$/ } }
  10. */
  11. function wrapForm(form, originalSubmit, validationRules) {
  13. form.addEventListener('submit', function(event) {
  14. event.preventDefault(); // Prevent default form submission
  16. let isValid = true;
  18. // Validate each field based on the rules
  19. for (const fieldName in validationRules) {
  20. const rule = validationRules[fieldName];
  21. const field = form.querySelector(`[name="${fieldName}"]`);
  23. if (rule.type === 'required' && !field.value.trim()) {
  24. console.error(`Field "${fieldName}" is required.`);
  25. isValid = false;
  26. field.classList.add('error'); // Add an error class for styling
  27. }
  29. if (rule.type === 'pattern' && field.value.trim() && !rule.pattern.test(field.value.trim())) {
  30. console.error(`Field "${fieldName}" does not match the pattern.`);
  31. isValid = false;
  32. field.classList.add('error');
  33. }
  34. }
  36. if (!isValid) {
  37. // Display validation errors to the user (e.g., using a message)
  38. const errorMessagesElement = document.getElementById('error-messages');
  39. if (errorMessagesElement) {
  40. errorMessagesElement.innerHTML = ''; // Clear previous errors
  41. for (const fieldName in validationRules) {
  42. const rule = validationRules[fieldName];
  43. const field = form.querySelector(`[name="${fieldName}"]`);
  44. if (field.classList.contains('error')) {
  45. errorMessagesElement.innerHTML += `<p><strong>${fieldName}:</strong> ${rule.message || 'Invalid input'}</p>`;
  46. }
  47. }
  48. }
  49. return; // Stop submission if validation fails
  50. }
  52. // Call the original submit handler if validation passes
  53. originalSubmit();
  54. });
  55. }
  58. //Example Usage (assuming you have a form element with id "myForm")
  59. // wrapForm(document.getElementById('myForm'), myOriginalSubmitHandler, myValidationRules);
  61. /**
  62. * Example validation rules. Customize this to match your form.
  63. * @returns {object}
  64. */
  65. function createValidationRules() {
  66. return {
  67. name: { type: 'required', message: 'Name is required' },
  68. email: { type: 'required', pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ , message: 'Invalid email format' },
  69. age: { type: 'required', pattern: /^\d+$/ , message: 'Age must be a number' }
  70. };
  71. }

Add your comment