Ep

Ep

Form Validation in JavaScript with Example

JavaScript Validation on Form Submit Button

In this blog post I will demonstrate how to validate html controls in asp.net web application. I will cover javascript email validation, mobile number validation, numeric only and alphabets only validation. Find the javascript code snippet below:-
form validation script, email validation script, javascript email validation, email address validation javascript, javascript checker, js form, javascript form,
html form validation on submit
Defaul.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
    <title>Javascript validate form value</title> 

    <script type="text/javascript">   
    // To validate input full name
    function ValidateLettersWithSpaceOnly (evt)
        {
            evt = (evt) ? evt : event;
            var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
          ((evt.which) ? evt.which : 0));
          if (charCode > 32 && (charCode < 65 || charCode > 90) &&
          (charCode < 97 || charCode > 122)) {
                return false;
          }
            return true;
        }
   
    // To validate copy/paste full name
    function ValidateFullNamePaste (obj)
        {
            var totalCharacterCount = window.clipboardData.getData('Text');
            var strValidChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ";
            var strChar;
            var FilteredChars = "";
            for (i = 0; i < totalCharacterCount.length; i++) {
                strChar = totalCharacterCount.charAt(i);
                if (strValidChars.indexOf(strChar) != -1) {
                    FilteredChars = FilteredChars + strChar;
                }
            }
            obj.value = FilteredChars;
            return false;
        }


        // To validate input user name
        function ValidateUsernameOnly(evt)
        {
            evt = (evt) ? evt : event;
            var characterCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
            ((evt.which) ? evt.which : 0));
            if (characterCode > 31 && (characterCode < 65 || characterCode > 90) && (characterCode < 45 || characterCode > 46) &&
            (characterCode < 97 || characterCode > 122) && (characterCode < 48 || characterCode > 57)) {
                return false;
            }
            return true;
        }
       
        // To validate copy/paste user name
        function ValidateUsernamePaste(obj)
        {
            var totalCharacterCount = window.clipboardData.getData('Text');
            var strValidChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.";
            var strChar;
            var FilteredChars = "";
            for (i = 0; i < totalCharacterCount.length; i++) {
                strChar = totalCharacterCount.charAt(i);
                if (strValidChars.indexOf(strChar) != -1) {
                    FilteredChars = FilteredChars + strChar;
                }
            }
            obj.value = FilteredChars;
            return false;
        }
 
        // To validate input email id
         function validateEmail(emailField)
         {
            emailField= document.getElementById("txtEmail").value;
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (reg.test(emailField) == false) {
                alert('Invalid Email Address');
                return false;
            }
            return true;
            alert('Submitted sucessfully.');
        }

        // To validate input phone/mobile number
        function ValidateNumberOnly(evt)
         {
            if ((evt.keyCode < 48 || evt.keyCode > 57))
            {     
                  return false;
            }
         }

        // To validate copy/paste phone/mobile number
        function ValidateNumberPaste(obj)
        {
            var totalCharacterCount = window.clipboardData.getData('Text');
              var strValidChars = "0123456789";
           var strChar;
                  var FilteredChars = "";
            for (i = 0; i < totalCharacterCount.length; i++) {
                strChar = totalCharacterCount.charAt(i);
                if (strValidChars.indexOf(strChar) != -1) {
                    FilteredChars = FilteredChars + strChar;
                }
            }
            obj.value = FilteredChars;
            return false;
        }
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>
        javascript onsubmit return</h1>
    <br />
    <div>
        Full Name:<br />
        <asp:TextBox ID="txtFullName" onkeypress="return ValidateLettersWithSpaceOnly(event);"
            onPaste="return ValidateFullNamePaste(this);" MaxLength="50" runat="server">               
        </asp:TextBox>
        <br />
        <br />
        User Name:<br />
        <asp:TextBox ID="txtUsername" onkeypress="return ValidateUsernameOnly(event);" onPaste="return ValidateUsernamePaste(this);"
            MaxLength="30" runat="server">
        </asp:TextBox>
        <br />
        <br />
        Mobile/Phone:<br />
        <asp:TextBox ID="txtPhone" onkeypress="return ValidateNumberOnly(event);" onPaste="return ValidateNumberPaste(this);"
            MaxLength="10" runat="server">
        </asp:TextBox>
        <br />
        <br />
        E-mail:<br />
        <asp:TextBox ID="txtEmail" MaxLength="30" runat="server"></asp:TextBox>
        <asp:Button ID="btnSave" Text="Register" runat="server" OnClientClick="validateEmail(this);" />
    </div>
    </form>
</body>
</html>
Form Validation in JavaScript with Example Reviewed by Ravi Kumar on 11:43:00 AM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.