0
<div class="col-md-6" style="margin-bottom:1%;">
<apex:input type="tel"  value="{!telephone}" html-pattern="[0-9]" html-placeholder="Telephone" html-oninvalid="setCustomValidity('Please Enter only numbers')" html-oninput="setCustomValidity(' ')" />
</div> 

I have this code in my vf page. I want to put a custom validation on this field instead of default validation message. It is showing me my required custom validation when input doesn't match but I am unable to submit when I put exact match it is still showing the message.

7
  • Can you please try using <input> tag instead of <apex:input> stackoverflow.com/questions/16867407/… May 26, 2017 at 8:11
  • Tried it, didn't work. The thing is I am able to see the message but it do not let me submit whether the input is correct(number between 0-9). May 26, 2017 at 9:12
  • Then it may be that some other thing is restricting it from submitting. Did you try submitting after removing this validation from this field altogether? May 26, 2017 at 9:15
  • I think html-pattern failing with this custom validation May 26, 2017 at 9:23
  • Ok, please try html-pattern="^[0-9]", i saw this in some examples, or have you already tried it? May 26, 2017 at 9:26

2 Answers 2

1

It is possible to validate phone number using <apex:input> also, Just give an id to your element and retrive its value in a javascript function.

You can use a javascript function for validating as shown below : Here "num" is the value to validate.

  function validatePhone(num)
    {
        var mobPattern = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/;
        //pattern matcher for salesforce phone field

        if(!num.match(mobPattern))
        {
            //do something for valid number.
        }
        else
        {
            //do something for invalid number.
             alert('Invalid number');
        }
    }

The mobPattern will match with the standard salesforce field.

First try the pattern using online Regex validator : online Regex validator

0

You can use a script that will restrict the entry of number into your input text.This script will only allow you enter number else no character will work. PS: It will allow you to use TAB and ESC also.

Please refer the below code:

At VF page replace your code with this :

<apex:outputLabel value="Phone" for="phNoId" title="Please Enter Only Number"/>
<apex:inputText value="{!phone}" id="phNoId" onkeypress="return numbersonly(this, event)" />

Script :

<script>        
       //This script is used to restrict the end user to enter only numeric character.
        function numbersonly(myfield, e){
            var key;
            var keychar;
            if (window.event)
                key = window.event.keyCode;
            else if (e)
                key = e.which;
            else
                return true;
            keychar = String.fromCharCode(key);

            // control keys
            if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
                return true;

            // numbers
            else if ((("0123456789").indexOf(keychar) > -1))
                return true;            
            else
                return false;
        } 
    </script>

Hopefully this will solve your problem .

Snap of help text on hover of mouse:

enter image description here

3
  • it is restricting the user according to requirement but How the user will able to know that he needs to put numeric value unless I show some message. May 26, 2017 at 9:07
  • I hope all users knew that in Phone number we are supposed to enter only number. And you can provide title="Please Enter Only Number", on hover of the mouse it will display the msg requesting for number only. May 26, 2017 at 9:37
  • Thanks for the script, however, its only functional on windows, not on mobile. Sep 8, 2021 at 18:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .