Client side form validation not working jquery...

if you still face issues, then set ClientIDMode of asp.net controls and then change your code like below

ClientIDMode set to static ensures that the id of controls wont change at runtime.

<script>
$(document).ready(function () {
$.validator.addMethod("match", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Please enter a valid email address.");
//custom validation rule for Dropdown List
$.validator.addMethod("CheckDropDownList", function (value, element, param) {
if (value == '0')
return false;
else
return true;
}, "Please select a Department.");
$("#form1").validate({
rules: {
name: {
required: true,
minlength: 10,
},
email: {
required: true,
//email:true,
match: true,
},
field: {
required: true,
digits: true,
},
ddlDept: {
CheckDropDownList: true,
},
txtMobNo: {
required: true,
digits: true,
minlength: 10,
pattern: [/^[7-9]{1}[0-9]{9}$/],
},
},
messages: {
name: {
required: " Required Field *",
minlength: "Minimum length 10 digit",
},
email: {
required: "Email id is required"
},
txtMobNo: {
required: "Enter Mob No",
minlength: "Mobile No should be 10 digit",
},
},
});
});
script>
head>
<body>
<form id="form1" runat="server">
<div>
<br />
<span>First Namespan>
<asp:TextBox ID="name" runat="server" CssClass="required" ClientIDMode="Static">asp:TextBox>
div>
<div>
<span>E-Mail IDspan>
<asp:TextBox ID="email" runat="server" CssClass="required" ClientIDMode="Static">asp:TextBox>
div>
<div>
<span>Mobile Numberspan>
<asp:TextBox ID="field" runat="server" MaxLength="10" CssClass="required" ClientIDMode="Static">asp:TextBox>
div>
Department
<asp:DropDownList ID="ddlDept" runat="server" CssClass="form-control required" ClientIDMode="Static">
<asp:ListItem Value="0">-- Department --asp:ListItem>
<asp:ListItem Value="1">Cityasp:ListItem>
<asp:ListItem>asp:ListItem>
asp:DropDownList>
<asp:Label ID="Label1" runat="server" Text="Label">asp:Label>
<asp:TextBox ID="txtMobNo" runat="server" CssClass="form-control required" ClientIDMode="Static">asp:TextBox>
<div>
<asp:Button ID="Button1" runat="server" Text="submit" />
div>
form>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ajeesh8y ago
if you still face issues, then set ClientIDMode of asp.net controls and then change your code like below

ClientIDMode set to static ensures that the id of controls wont change at runtime.
<script>
        $(document).ready(function () {

            $.validator.addMethod("match", function (value, element) {
                return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
            }, "Please enter a valid email address.");
            //custom validation rule for Dropdown List
            $.validator.addMethod("CheckDropDownList", function (value, element, param) {
                if (value == '0')
                    return false;
                else
                    return true;
            }, "Please select a Department.");

            $("#form1").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 10,
                    },
                    email: {
                        required: true,
                        //email:true,
                        match: true,
                    },
                    field: {
                        required: true,
                        digits: true,
                    },
                    ddlDept: {
                        CheckDropDownList: true,
                    },
                    txtMobNo: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        pattern: [/^[7-9]{1}[0-9]{9}$/],
                    },
                },
                messages: {
                    name: {
                        required: " Required Field *",
                        minlength: "Minimum length 10 digit",
                    },
                    email: {
                        required: "Email id is required"
                    },
                    txtMobNo: {
                        required: "Enter Mob No",
                        minlength: "Mobile No should be 10 digit",
                    },
                },
            });
        });

    script>
head>
<body>
    <form id="form1" runat="server">
        <div>
            <br />
            <span>First Namespan>
            <asp:TextBox ID="name" runat="server" CssClass="required" ClientIDMode="Static">asp:TextBox>
        div>
        <div>
            <span>E-Mail IDspan>
            <asp:TextBox ID="email" runat="server" CssClass="required" ClientIDMode="Static">asp:TextBox>
        div>
        <div>
            <span>Mobile Numberspan>
            <asp:TextBox ID="field" runat="server" MaxLength="10" CssClass="required" ClientIDMode="Static">asp:TextBox>
        div>
        Department
        <asp:DropDownList ID="ddlDept" runat="server" CssClass="form-control required" ClientIDMode="Static">
            <asp:ListItem Value="0">-- Department --asp:ListItem>
            <asp:ListItem Value="1">Cityasp:ListItem>
            <asp:ListItem>asp:ListItem>
        asp:DropDownList>
        <asp:Label ID="Label1" runat="server" Text="Label">asp:Label>
        <asp:TextBox ID="txtMobNo" runat="server" CssClass="form-control required" ClientIDMode="Static">asp:TextBox>
        <div>
            <asp:Button ID="Button1" runat="server" Text="submit" />
        div>
    form>
Ajeesh8y ago
You have multiple version of jquery files(Compressed(min) and uncompressed) referenced in your page. if you have multiple references of same file then the code wont work.
Try your code with below script references
<link href="Content/bootstrap.min.css" rel="stylesheet" />

<script src="Scripts/jquery-1.9.1.js">script>
<script src="Scripts/jquery.validate.js">script>