| 6 | const [modalMessage, setModalMessage] = useState(''); |
| 7 | |
| 8 | const handleJoin = () => { |
| 9 | if (!name) { |
| 10 | setModalMessage("Name cannot be empty. Please enter your name."); |
| 11 | } else if (name.length < 3 || name.length > 20) { |
| 12 | setModalMessage("Name must be between 3 and 20 characters long."); |
| 13 | } else if (!/^[a-zA-Z\s]+$/.test(name)) { |
| 14 | setModalMessage("Name can only contain letters and spaces."); |
| 15 | } else { |
| 16 | onSubmit(name); // Pass the valid name to the parent component |
| 17 | onClose(); // Close the modal |
| 18 | } |
| 19 | }; |
| 20 | |
| 21 | // Prevents keyboard accessibility issues by handling Enter key for submit |
| 22 | const handleKeyDown = (event) => { |