Form phone input validation

Publishing help General
1

How do I add validation for a phone number input in form field?
I see that there is validation for Email can not find for Phone Number.

2

Hi, this can be done, but not natively in webflow via the UI (at the moment). What you can do though, is to create an event listener in jquery, that can listen to the “blur” event, so that when a user mouses out of the phone field, a javascript function is called that checks the content in the form field for phone and validates it, before the form is submitted. If you need some help, you can send me a pm…

example code pasted in “before body” section of site settings → Custom Code:

$( "#phonefield" ).blur(function() {
  phonenumber($("#phonefield").val());
});

If you want to have more information and look it up yourself, you can find it at:

https://api.jquery.com/blur/

And for the phone number validation, To valid a phone number like:

XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX

use the following code: in the function that you call on the blur event:

<script>
function phonenumber(inputtxt) {  
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;  
  if((inputtxt.value.match(phoneno))  
        {  
      return true;  
        }  
      else  
        {  
        alert("Not a valid phone number, please correct");  
        return false;  
        }  
}  
</script>

You can paste the function also into the “before body” section of site settings → custom code.

Cheers

2 Likes