Validation allow numbers only and phone number format on keypress using JQuery?

Question

Example:

See below image what exactly i need

Thanks anyone help this to simple code...

Answer 1

I've implemented below Masked Input Plugin to apply the same functionality what you need.

Step1 : Download this plugin

http://digitalbush.com/projects/masked-input-plugin

Step2 : Write Below code in your CSHTML or HTml Page.

    <script type="text/javascript">
        $(document).ready(function () {
        $("#ContactNo").mask("(+9) 999-999-9999");
        $("#txtContactNo2").mask("(+9) 999-999-9999");
     });

</script>

Hope this works ! Cheers :)

Answer 2

link this script to your page and do masking format as you want

<script src="../JavaScript/jquerymaskedinput.js" type="text/javascript"></script>

enter code here

and then write this inside script
$(function () {
        Masktext();
    });

function Masktext() {

        $('#<%=txtTelephone.ClientID %>').mask('(999)999-9999');   
        $('#<%=txtFaxNumber.ClientID %>').mask('(999)999-9999');    
        $('#<%=txtTelephoneMD.ClientID %>').mask('(999)999-9999');    
      $('#<%=txtTelephoneHC.ClientID %>').mask('(999)999-9999');    
    }

Answer 3

You can add an event listener to the submit button (I am assuming that it has got an ID like buttonId ), and check if the number is valid (I'm assuming that your number input has an ID like numberId ), like this:

var button = document.getElementById("buttonId"),
    number = document.getElementById("numberId");

button.addEventListener("click", function(e) {
    if (/[^0-9\-\+]/.test(number.value)) {
        e.preventDefault();
        alert("Please enter a valid telephone number!");
    }
});