validate phone numbers

An example of how to use JS and CSS to provide instant feedback. Puts the feedback message in a <span> element alongside each <input>.

HTML

<html>
        <body>
        
        
                <input id="mobilephone" type="text" name="mobilephone" onblur="validatePhone()" />
                <span id="mobileresult" ></span>
                
        </body>
        
        </html>

CSS

body {
                font-family: Helvetica, Arial, Sans-Serif;
            }

            #homeresult, #mobileresult, #overallresult {
                font-size: 0.666em;
                font-weight: bold;
                display: inline-block;
                border-width: 1px;
                border-style: solid;
                padding: 0.3em;
            }
            .hidden {
                display: none;
                position: relative;
                left: -999em;
            }
            .valid {
                background-color: lightgreen;
                color: darkgreen;
                border-color: darkgreen;
            }
            .invalid {
                background-color: pink;
                color: darkred;
                border-color: darkred;
            }
            legend { font-size: 0.5em; font-color: blue; }
label { min-width: 6em; display: inline-block; }

JavaScript

function validatePhone() {
    // === regular expressions ===
    var re = /\+\d{3}\-\d{2}\-\d{7}$/;
        // === DOM element references ===
        
        var phoneElem = document.getElementById('mobilephone');
        var resultVar = document.getElementById('mobileresult');
        
        // === Local vars ===
        var phoneIsValid = false;
        resultVar.innerHTML = phoneElem.value;  
        if (phoneElem.value.match(re)) {       
             resultVar.innerHTML = "valid. ";       			
        }else{
        	   resultVar.innerHTML = "10 digits e.g. +971-XX-XXXXXXX";        
        }
   
}