Hi Everyone, 

i have a faitly straight forward Visualforce page that takes the mobile number. I wanted to validate with Javascrip on the client side like below. 
 

<script>
         function jsCheckPhone()  
        {  
          var mobile = document.getElementById('pageId:formId:mobileId').value;  
          var normal = /^\d{10}$/;  
          if((mobile.value.match(normal))  
                {  
                document.getElementById('mobileMessageId').style.color = 'green';
                document.getElementById('mobileMessageId').innerHTML = 'Looks Good!';  
                }  
              else  
                {  
                document.getElementById('mobileMessageId').style.color = 'red';
                document.getElementById('mobileMessageId').innerHTML = '10 Digits Required';  
                }  
        }  
        </script>

And then later in the form I am calling it like this: 
 

<div role="listitem" class="freebirdFormviewerViewItemsItemItem">
                            <div class="freebirdFormviewerViewItemsItemItemTitle">Mobile <span style="color: #db4437;">*</span></div>
                        </div>
                        <div class="freebirdFormviewerViewItemsTextItemWrapper">
                            <apex:inputField onkeyup="jsCheckPhone();return false;" id="mobileId" value="{!contact.MobilePhone}" required="true" html-placeholder="Your answer" styleClass="freebirdText"/>
                        <span id="mobileMessageId"></span>
                        </div>

It does however never display anything next to the field. Could someone let me know what I am missing / If there would be a better way to have a phone number validated in Visualforce? 

Thanks.