Telephone field (HTML4)

by Alon Rotem

HTML

<form id="mainform" method="post">
    <input id="telInput" type="text" />
    <span id="phonePattern">+359-888-88-88-88</span>
    <span id="errorMessage">Dude!</span>
    <br/>
    <input type="submit" value="Apply" />
    <input type="reset" value="reset" />
</form>

CSS

#phonePattern {
    color: gray;
    z-index:6;
    font: -webkit-small-control;
    position:absolute;
}
#telInput {
    background-color: transparent;
    border: 1px solid gray;
    z-index: 10;
}
#errorMessage {
    background-color: yellow;
    position:absolute;
    padding: 3px;
    border: 1px solid gray;
    display: none;
}

JavaScript

//Validation pattern
var phoneRegEx = new RegExp("\\+[0-9]{3}\\-[0-9]{3}\\-[0-9]{2}\\-[0-9]{2}\\-[0-9]{2}", "i");

$(document).ready(function () {
    //move the pattern into its related box
    moveElementToAnotherElement($("#phonePattern"), $("#telInput"), 2, 3);
    
    //click on the pattern activates the box
    $("#phonePattern").click(function () {
        $("#telInput").focus();
    });
    
    //setting the text shows/hides the pattern
    $("#telInput").keyup(function () {
        $("#errorMessage").hide();
        if (this.value != "") 
            $("#phonePattern").hide();
        else $("#phonePattern").show();
    });
    
    //form submit: validate the box
    $("#mainform").submit(function (event) {
        $("#errorMessage").hide();
        if(($("#telInput").val() == "") ||
            (phoneRegEx.exec($("#telInput").val()) == null)){
            moveElementToAnotherElement($("#errorMessage"), $("#telInput"), 20,130);
            $("#errorMessage").slideToggle(200, 'swing');
            event.preventDefault();
        }
    });
    
    //resetting the form: perfomr custom actions.
    $("input[type='reset']").on("click", function (event) {
        event.preventDefault();
        $(this).closest('form').get(0).reset();
        $("#phonePattern").show();
        $("#errorMessage").hide();
    });
});

function moveElementToAnotherElement(elementToMove, baseElement, offsetTop, offestLeft) {
    if (isNaN(parseInt(offsetTop))) 
        offsetTop = 0;
    if (isNaN(parseInt(offestLeft))) 
        offestLeft = 0;

    var offset = $(baseElement).offset();
    $(elementToMove).css("top", offset.top + offsetTop);
    $(elementToMove).css("left", offset.left + offestLeft);
}