I understand now—you want real-time phone number validation that triggers as the user types, using a keyup event (or similar), and prevents non-numeric characters from being entered into the input field entirely, while ensuring the input is limited to 10 digits. This means the validation will:
- Block non-numeric input (e.g., letters, symbols) at the moment of typing.
- Enforce a maximum length of 10 digits.
- Provide immediate visual feedback (e.g., error messages) if the input is invalid.
- Work seamlessly with the existing appointment form from the provided PHP code.
To achieve this, I'll create a JavaScript function that:
- Uses an input event listener (preferred over keyup for real-time input handling, as it captures all input changes, including pasting) to validate and filter the phone number.
- Prevents non-numeric characters by modifying the input value in real-time.
- Displays error messages in the .help-block.with-errors div if the input is empty or exceeds 10 digits.
- Integrates with the form's submission to ensure validation is complete.
JavaScript Code
The following JavaScript code will be added to your existing JavaScript file (e.g., function.js) or a