1. function enforceFormFieldLimits() {
  2. const form = document.querySelector('form'); // Select the form element
  4. if (!form) {
  5. console.warn("No form found. Limits will not be enforced.");
  6. return;
  7. }
  9. const fields = form.querySelectorAll('input, textarea, select'); // Select all form fields
  11. fields.forEach(field => {
  12. const limit = field.dataset.limit; // Get limit from data attribute
  13. const type = field.type;
  15. if (limit) {
  16. field.addEventListener('input', () => { // Listen for input events
  17. let value = field.value;
  19. if (type === 'number') {
  20. value = parseInt(value, 10); // Convert to number
  21. if (isNaN(value)) {
  22. value = 0; // Handle invalid number input
  23. }
  24. } else if (type === 'text' || type === 'email' || type === 'tel') {
  25. value = String(value); // Ensure it's a string
  26. }
  28. if (value.length > limit) {
  29. field.value = value.slice(0, limit); // Truncate value
  30. field.dataset.error = `Maximum length is ${limit}`; // Add error message
  31. } else {
  32. field.dataset.error = ''; // Clear error message
  33. }
  34. });
  35. }
  36. });
  37. }
  39. // Call the function when the DOM is ready
  40. document.addEventListener('DOMContentLoaded', enforceFormFieldLimits);

Add your comment