JQuery validation Not working for asp.net textbox
Question
My $("#form1").validate({}); is not working
My MarkUp
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Default.aspx.cs" Inherits="WebApplication1._3_Tier._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 id="Head1" runat="server">
<title>Insert Records into DataBase</title>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Scripts/a.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>
<h3>
Demo: 3-Tier Architecture</h3>
<form id="form1" runat="server">
<div>
<p>
<a href="List.aspx">List Records</a></p>
<asp:Label ID="lblMessage" runat="Server" ForeColor="red" EnableViewState="False"></asp:Label>
<table style="border: 2px solid #cccccc;">
<tr>
<td>
First Name:
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="AddRecords" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
My JS
$(document).ready(function () {
var firstname = $('#txtFirstName').val();
$("#form1").validate({
rules: {
firstname: {
required: true,
}
},
messages: {
firstname: {
required: "Please provide your firstname",
}
}
});
});
I took help of this this post
JQuery Validation is not validating
I Tried to rectify My Code ..Still after that it is not working
this is generated HTML
<!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 id="Head1">
<style type="text/css">
body
{
font-family: Arial, Trebuchet Ms;
font-size: 10pt;
}
</style>
<title>
Insert Records into DataBase
</title>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Scripts/a.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>
<h3>
Demo: 3-Tier Architecture</h3>
<form method="post" action="_Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjEzNDcyMDczZGQt6WgCuARQGKOLro6pdjwaUvt/QFoxwH5v1RzCNAUj7w==" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAX8Nm0IHiD/KCZocX+BlM2eTNr8+Dx/H+2fNfPhxgyex+tZBdiRon5d1qE03oo5TvNalnLgDFTt8y4U1Y3swfOyPOaW1pQztoQA36D1w/+bXdBIngoW+rlnKfoMZ3QFO1yNN5iBqFwWfHPEKsfQ/9eW" />
</div>
<div>
<p>
<a href="List.aspx">List Records</a></p>
<span id="lblMessage" style="color:Red;"></span>
<table style="border: 2px solid #cccccc;">
<tr style="background-color: #507CD1; color: White;">
<th colspan="3">
Add Records
</th>
</tr>
<tr>
<td>
First Name:
</td>
<td>
<input name="txtFirstName" type="text" id="txtFirstName" />
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input name="txtLastName" type="text" id="txtLastName" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<input name="txtAge" type="text" size="4" id="txtAge" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
I tried to run on http://jsfiddle.net/7T7ZX/ ...it is not working
I am debugging on Firebug . it is debugging fine there .
Please suggest
3 answers
solution1
2 ACCPTED 2014-05-07 14:07:41
The ID of the generated input will not be txtFirstName -- asp.net creates a long ID based on the hierarchy of the element in the page. Check it out in your browser's F12 tools (or dev tools on mac) if you don't believe me.
If you have access to the jQuery inline in the page then you can use the element's generated Client ID like this:
var firstname = $('#<%=txtFirstName.ClientID%>').val();
If you don't want to do that, a workaround is using classes instead of ids to select the elements:
<asp:TextBox ID="txtFirstName" runat="server" cssclass="firstName" />
...
var firstname = $('.firstName').val();
solution2
1 2014-05-07 13:57:32
You are using two different selectors here and I think it's a good idea to make sure they are correct. Just because your code says id="txtFirstName" does not mean the source code is the same.
Load the web page and open up the source code, find your in the source code and make sure it has an id="form1". Then do the same for the textbox, make sure the textbox has an id="txtFirstName".
It's possible (if you are using webforms, say) that when your website runs these items are being renamed to something like id="_001_controller_txtFirstName" (I can't remember exactly, I just remember it renames things on your behalf!)
If this is the case, you'll need to update your jQuery abit, this should do the trick:
var firstname = $("#<%= txtFirstName.ClientID %>");
$("#<%= form1.ClientID %>").validate({...
solution3
0 2014-05-07 13:52:44
Change This Line:
<form id="form1" runat="server">
to
<form id="form1" runat="server" name="form">
or try:
$("#form1").validate({ ... });
Here You are accessing form element by its name in JQuery , And You have'nt given any name to it.
Thus either give a name or access it by it's id .
According to Your Comment.
EDIT:
Try This:
change:
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
to:
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" OnClick="validate_form(this);event.preventDefault();event.stopPropagation();" />
and in your <head> section add:
<script type="text/javascript">
function validate_form(x){
var frm=$(x).closest("form");
$(frm).validate({...});
}
</script>
Inform me if it helps you.
Hope it'll Help you Cheers!
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.