Phone Number input field accept only number in javascript

<form id="enquiryForm" name="wf-form-Enquiry-Form-2" data-name="Enquiry Form" >
    <input type="text" class="form-input-field w-input" maxlength="256" name="Name" data-name="Name" placeholder="Name*" id="name" required="">
    <input type="email" class="form-input-field w-input" maxlength="256" name="Email" data-name="Email" placeholder="Email*" id="Email" required="">
    <input type="text" class="form-input-field w-input" maxlength="256" name="Company" data-name="Company" placeholder="Company*" id="Company" required="">
    <input type="text" class="form-input-field w-input" maxlength="256" name="Phone" data-name="Phone" placeholder="Phone" id="Phone" required="">
    <textarea id="Project-Detail" name="Project-Detail" maxlength="5000" data-name="Project Detail" placeholder="Tell us about your project" class="form-input-field text-area w-input"></textarea>
    <div class="w-embed">
        <input type="hidden" class="button-position" name="Position" value="">
    <input type="submit" value="Book Free Call" data-wait="Please wait..." class="button red-btn form w-button">

I’ve been working on a nocode design studio landing page, and I’m currently tackling the phone number validation. I want to make sure that only numbers are accepted in the phone number field. Here’s the part of the code I’ve been working on for this. Any tips or suggestions would be appreciated!

Feel free to provide more details or ask for specific assistance if needed!

You can add a custom attribute of pattern with a value to describe what you want.
e.g. if you want only digits, and between 7 to 10 of them, you could use-

pattern = [0-9]{7,10)

Hi @epycnocodestudio I would like to add more info to be clear how validation works.

Generally speaking there are two types of the input validation.

  1. ON SERVER: this validation is done on form submission. This mean that form data are send to server and there are these data checked agains some validator before are stored in DB etc.

  2. ON CLIENT (browser) input is validated on the fly in browser. Client validation is in most cases better as user has immediate feedback when error occurs instead delayed feedback after submission.

You can use eg. ZOD (one of the best validation lib at current time)

RegEx pattern is great to check if phone has some format (pattern) eg. pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" but value checked with RegEx is still a string. If you would like to allow users use only numbers and give them immediate visual feedback via error message when they use different character. You should convert string to number to make it work.

Here is simple JS example how it can be done.

One more note for phone use type="tel" as it has advantages on mobile devices compare to standard type="text"