jquery Client Side validation
Question
I am trying to validater my .aspx form using jQuery Validate plugin. I have written the function for the validation with the rules for checking and messages for showing the error messages.
But even after adding all the necessary plugins and function calls, my form is not getting validated.
Can anyone please guide me if am wrong somewhere.
I am attaching the .aspx code below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script>
//$(function () {
$(document).ready(function () {
debugger;
$("#form1").validate({
rules: {
lblName: "required",
lblCity: "required",
lblDepName: "required",
lblSalary: {
required: true,
number: true
},
},
// Specify the validation error messages
messages: {
lblName: "Please enter your Name",
lblCity: "Please enter your City",
lblDepName: "Please select a department Name from the dropdown list",
lblSalary: {
required: "Please enter the Salary",
number: "Only Numbers are allowed"
}
},
submitHandler: function (form) {
form.submit();
}
});
$('#btnInsertEmployee').click(function () {
debugger;
if ($("#form1").validate()) {
}
});
//});
});
</script>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
}
.auto-style3 {
width: 146px;
height: 26px;
}
.auto-style4 {
height: 26px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
<br />
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowEditing="GridView1_RowEditing">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<table class="auto-style1">
<tr>
<td class="auto-style3">
<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
</td>
<td class="auto-style4">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblDepName" runat="server" Text="Department Name"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlDepName" runat="server" AutoPostBack="True" Height="16px" OnSelectedIndexChanged="ddlDepName_SelectedIndexChanged" Width="122px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblSalary" runat="server" Text="Salary"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="btnInsertEmployee" runat="server" OnClick="btnInsertEmployee_Click" Text="Insert Employee" />
</td>
</tr>
<tr>
<td class="auto-style2" colspan="2">
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</form>
</body>
</html>
1 answers
solution1
0 2015-10-23 07:21:08
Instead of lblName or lblCity, it should be txtName or txtCity.
rules: {
txtName: "required",
txtCity: "required",
},
// Specify the validation error messages
messages: {
txtName: "Please enter your Name",
txtCity: "Please enter your City",
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery validation and client side events
Jquery client side validation with jquery datepicker
jQuery client side validation for rails datetime select
jQuery file extension validation on client side
jQuery validation for client-side dynamic controls
Jquery Client-Side Form Validation
client side form validation
Client Side Validation
customvalidator client side validation
client side validation not working
Related Tags