Monday, 5 December 2016

How to mobile number validation in JavaScript



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javascript mobile number validation</title>
    <style type="text/css">
        body {
            font-family: Verdana, Geneva, sans-serif;
        }
        
        .error {
            color: white;
            background-color: rgb(247, 23, 23);
            margin-left: 12px;
            border-radius: 3px;
        }
        
        .dsNone {
            display: none;
        }
        
        .success {
            color: white;
            background-color: green;
            margin-left: 12px;
            border-radius: 3px;
        }
        
        .algContent {
            width: 100%;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <form id="form1" runat="server" style="margin-left: 28%;">
        <div class="algContent">
            <h1>Mobile Validation In JavaScript</h1>
        </div>
        <br>
        <br>
        <br>
        <div class="algContent">
            <div style="float:left;">
                <span>Enter the Mobile No:</span> <span>
            <input id="txtPhoneNo" type="text" onkeypress="return isNumber(event)" />
        </span>
            </div>
            <div style="float:left;">
                <span style="float:left;" id="errorMsg" class="dsNone error"></span><span style="float:left;" id="successMsg" class="dsNone success">
    </span>
            </div>
            <br>
            <br>
            <input type="button" value="Submit" onclick="ValidateNo();">
        </div>
    </form>
    <script type="text/javascript">
        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                var errorMsg = document.getElementById("errorMsg");
                errorMsg.style.display = "block";
                document.getElementById("errorMsg").innerHTML = "  Please enter only Numbers.  ";
                return false;
            }

            return true;
        }

        function ValidateNo() {
            var phoneNo = document.getElementById('txtPhoneNo');
            var errorMsg = document.getElementById("errorMsg");
            var successMsg = document.getElementById("successMsg");

            if (phoneNo.value == "" || phoneNo.value == null) {
                errorMsg.style.display = "block";
                successMsg.style.display = "none";
                document.getElementById("errorMsg").innerHTML = "  Please enter your Mobile No.  ";
                return false;
            }
            if (phoneNo.value.length < 10 || phoneNo.value.length > 10) {
                errorMsg.style.display = "block";
                successMsg.style.display = "none";
                document.getElementById("errorMsg").innerHTML = "  Mobile No. is not valid, Please Enter 10 Digit Mobile No. ";
                return false;
            }

            successMsg.style.display = "block";
            document.getElementById("successMsg").innerHTML = " Success ";
            errorMsg.style.display = "none";
            return true;
        }
    </script>
</body>

</html>

How to mobile number validation in JavaScript 

5 comments:

  1. this post is very nice.thank you so much for posting this code.i really wanna do this code.
    Digital marketing company in india

    ReplyDelete
  2. Best informative post that I have never seen. You are great with your this job.I am happy to see and follow your post every time. Thank you.
    digital marketing services in delhi

    ReplyDelete
  3. What is an outstanding post! “I’ll be back” (to read more of your content). Thanks for the nudge! KVB Customer Care

    ReplyDelete
  4. Need the Azure Interview Questions And Answers? Get this into the blog with Infycle Technologies for having the top interview questions and answers! Call 7504633633 or 7502633633 for having the best software development courses!

    ReplyDelete