1. (function() {
  2. // Function to handle form submission errors
  3. function handleFormSubmissionError(form) {
  4. // Check if the form has an error
  5. if (form.checkValidity()) {
  6. return; // No errors, do nothing
  7. }
  9. // Get the form's validation errors
  10. const errors = form.elements;
  11. const errorMessages = [];
  13. for (let i = 0; i < errors.length; i++) {
  14. const element = errors[i];
  15. if (element.checkValidity() === false && element.validationMessage) {
  16. errorMessages.push(element.validationMessage);
  17. }
  18. }
  21. // Log the errors to the server (replace with your API endpoint)
  22. if (errorMessages.length > 0) {
  23. console.error("Form Submission Error:", errorMessages.join(", "));
  24. // Send data to server (example using fetch)
  25. fetch('/api/form-error', {
  26. method: 'POST',
  27. headers: {
  28. 'Content-Type': 'application/json'
  29. },
  30. body: JSON.stringify({
  31. formName: form.name, // Name of the form
  32. errors: errorMessages.join(", ") // Errors as a string
  33. })
  34. })
  35. .then(response => {
  36. if (!response.ok) {
  37. console.error("Error sending form error to server:", response.status);
  38. }
  39. });
  40. }
  41. }
  43. // Attach the event listener to the form
  44. document.addEventListener('DOMContentLoaded', function() {
  45. const forms = document.querySelectorAll('form'); // Select all forms
  46. forms.forEach(form => {
  47. form.addEventListener('submit', function(event) {
  48. // Prevent default form submission behavior
  49. event.preventDefault();
  51. // Handle errors after preventing submission
  52. handleFormSubmissionError(this);
  53. });
  54. });
  55. });
  57. })();

Add your comment