1. function tokenizeAndValidateForm(formElement) {
  2. const values = {};
  4. // Iterate through form elements
  5. for (let i = 0; i < formElement.elements.length; i++) {
  6. const element = formElement.elements[i];
  7. const name = element.name;
  8. let value = element.value;
  10. // Basic validation based on element type
  11. if (element.type === 'text' || element.type === 'email') {
  12. value = value.trim(); // Remove leading/trailing whitespace
  13. if (value === "") {
  14. alert(`Field '${name}' cannot be empty.`);
  15. element.focus(); // Focus on the invalid field
  16. return false; // Stop processing
  17. }
  18. //Simple email validation
  19. if (element.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
  20. alert(`Invalid email format for field '${name}'.`);
  21. element.focus();
  22. return false;
  23. }
  24. } else if (element.type === 'number') {
  25. value = parseInt(value, 10);
  26. if (isNaN(value)) {
  27. alert(`Invalid number format for field '${name}'.`);
  28. element.focus();
  29. return false;
  31. }
  32. if (element.min !== undefined && value < element.min) {
  33. alert(`Number for field '${name}' must be at least ${element.min}.`);
  34. element.focus();
  35. return false;
  36. }
  37. if (element.max !== undefined && value > element.max) {
  38. alert(`Number for field '${name}' must be at most ${element.max}.`);
  39. element.focus();
  40. return false;
  41. }
  42. } else if (element.type === 'password') {
  43. value = value.trim();
  44. if (value === "") {
  45. alert(`Field '${name}' cannot be empty.`);
  46. element.focus();
  47. return false;
  48. }
  49. }
  50. // Handle other types as needed (select, textarea, etc.)
  51. else {
  52. //For other types, just store the value
  53. value = value.trim();
  54. }
  57. values[name] = value;
  58. }
  60. return values; // Return the validated data
  61. }
  63. // Example usage (assuming you have a form with id "myForm")
  64. document.addEventListener("DOMContentLoaded", function() {
  65. const form = document.getElementById("myForm");
  66. if (form) {
  67. form.addEventListener("submit", function(event) {
  68. event.preventDefault(); // Prevent default form submission
  70. const validatedData = tokenizeAndValidateForm(form);
  72. if (validatedData) {
  73. console.log("Form data:", validatedData);
  74. // Process the validated data (e.g., send to server)
  75. }
  76. });
  77. }
  78. });

Add your comment