Tuesday, December 22, 2015

Client Side Validation using JavaScript in ASP.NET C#

In this article, I am going to explain how to validate value in JavaScript in ASP.NET C#.

Check Value is integer or not (like Age)

    <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)) {
                return false;
            }
            return true;
        }
    </script>

aspx textbox

<asp:TextBox ID="txtAge" runat="server"  onkeypress="return isNumber(event)" onpaste="return false"></asp:TextBox>

onkeypress="return isNumber(event)"  allow you only enter the integer value only.

Check Value is character or not

If you want textbox only accepts the character you can use the given below function

<script type="text/javascript">
        function checkChar(e) {
            var key;
            if (e.keyCode) key = e.keyCode;
            else if (e.which) key = e.which;
            if (/[^A-Za-z0-9]/.test(String.fromCharCode(key))) {
                return false;
            }
 
        }
    </script>

aspx textbox

<asp:TextBox ID="txtchar" runat="server"   onkeypress = "return checkChar(event)"></asp:TextBox>
 
Check Value is String or not (Like Name)

If you want textbox only accepts the strings you can use the given below function

<script type="text/javascript">
        function ValidateText(evt) {
            var keyCode = (evt.which) ? evt.which : evt.keyCode
            if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode >= 123) && keyCode != 32)
                return false;
            return true;
        }
    </script>

aspx textbox

<asp:TextBox ID="txtName" runat="server"  onkeypress="return ValidateText(event)" onpaste="return false" >
</asp:TextBox>

Check validate PAN Number

<script type="text/javascript">
        function fnValidatePAN(Obj) {
            if (Obj == null) Obj = window.event.srcElement;
            if (Obj.value != "") {
                ObjVal = Obj.value;
                var panPat = /^([a-zA-Z]{5})(\d{4})([a-zA-Z]{1})$/;
                var code = /([C,P,H,F,A,T,B,L,J,G,M])/;
                var code_chk = ObjVal.substring(3, 4);
                if (ObjVal.search(panPat) == -1) {
                    alert("Invalid Pan No");
                    Obj.focus();
                    return false;
                }
 
            }
        }
    </script>

aspx textbox

<asp:TextBox ID="txtPanNumber" runat="server" MaxLength="10"  onblur="fnValidatePAN(this);" style="text-transform:uppercase"  onpaste="return false" ></asp:TextBox>

Check validate Email ID

function checkEmail(Obj) {
            if (Obj.value != "") {
                if (/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(Obj.value)) {
 
                }
                else {
 
                    alert("Enter a valid email address!")
                    Obj.focus();
                    return (false)
                }
            }
        }

aspx textbox

<asp:TextBox ID="txtEmailID" runat="server" MaxLength="50" onpaste="return false"  onblur="checkEmail(this)"></asp:TextBox>

Check at least one radio button list is checked

<script type="text/javascript">
        function EmptyData() {
            var checkData = "No";
            var Listpaytype = document.getElementById("rbtnListpaytype");
            var inputs = Listpaytype.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].checked == true) {
                    checkData = "Yes";
                    PaymentCheckValue = inputs[i].value;
                    break;
                }
            }
            if (checkData == "No") {
                alert("Please Select At least a Gender");
                return false;
            }  
        }
</script>


aspx RadioButtonList ( when you click on button it checks at least one radio button list is cheeked or not).

<asp:RadioButtonList ID="rbtnListGendertype" runat="server" CssClass="rdolbl" RepeatDirection="Horizontal">
        <asp:ListItem>Male</asp:ListItem>
        <asp:ListItem>Female</asp:ListItem>
        <asp:ListItem>Other</asp:ListItem>       
</asp:RadioButtonList></td>
<asp:Button ID="btnCheck" runat="server" Text="Check"  OnClientClick="return EmptyData();"/>
 
Check Valid Amount or not
The given below function checks you enter the valid amount or not, it also not accepts the double dot.
<script type="text/javascript">
        function isNumberKey(evt, obj) {
 
            var charCode = (evt.which) ? evt.which : event.keyCode
            var value = obj.value;
            var dotcontains = value.indexOf(".") != -1;
            if (dotcontains)
                if (charCode == 46) return false;
            if (charCode == 46) return true;
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
</script>

aspx textbox


<asp:TextBox ID="txtAmount" runat="server" onkeypress="return isNumberKey(event,this)" onpaste="return false"></asp:TextBox>

No comments:

Post a Comment