Manish Manish - 4 months ago 65
jQuery Question

Jquery Validation plugin with Asp.net masterpage not working

hello i'm using jquery validation plug-in, its not showing any message

my javascript is

<script type="text/javascript">

$(document).ready(function () {

$('#mainform').validate({
rules: {
DishNameTextBox: { required: true, minlength: 2 },
DishDescriptionTextBox: { required: true }
},
highlight: function (label) {
alert('hi');
$(label).closest('.control-group').addClass('error');
},
success: function (label) {

label
.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});
});
</script>


I'm using masterpage, its HTML is as below

<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
<script src="js/main.js"></script>
<link href="css/bootstrapNew.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/main.css">
<link href="css/Custom.css" rel="stylesheet" type="text/css" />
<link href="themes/default/default.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<form runat="server" id="mainform">
<uc1:TopNavigationUserControl ID="TopNavigationUserControl1" runat="server" />
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>


i,m not sure where I'm going wrong.

please help as i have already wasted 5 hrs debugging this issue with out any luck.. :(

ok..here is my viewsource.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>

</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
<script src="js/main.js"></script>
<link href="css/bootstrapNew.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="css/main.css" /><link href="css/Custom.css" rel="stylesheet" type="text/css" /><link href="themes/default/default.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<form method="post" action="ListingNew.aspx" id="mainform">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUwMzgyNTgzOQ9kFgJmD2QWAgIDD2QWAgIBD2QWAgIHD2QWBAIBDxYCHgRocmVmBTlBdXRoZXRpY2F0aW9uUmVkaXJlY3Rpb24uYXNweD9SZWRpcmVjdFVybD1MaXN0aW5nTmV3LmFzcHhkAgMPFgIfAAU5QXV0aGV0aWNhdGlvblJlZGlyZWN0aW9uLmFzcHg/UmVkaXJlY3RVcmw9TGlzdGluZ05ldy5hc3B4ZGS3V8AKZc9NhSdqUZ2aX1LviwL8XQhOzd4kclkeoKvXZw==" />
</div>

<div class="aspNetHidden">

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwL3i6GVDwKcgKH7AgLYwYSQBQKJ9q3+BgKGmYeQCgKHmYeQCgKEmYeQCgKFmYeQCgKCmYeQCgKCmZOTCgL0jMC/B2nnxU9EgXEphsgiaKRpHC6YUG09Nnz/Q/pjswj/I9Po" />
</div>

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a><a class="brand" href="/Home.aspx">
Khana-wal</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"><a class="dropdown-toggle js-activated" href="#">Browse Dishes
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Most Popular</a></li>
<li><a tabindex="-1" href="#">Near to you</a></li>
</ul>
</li>
</ul>

<a class="btn btn-primary pull-right" style="margin-left: 20px" href="NewListing.aspx">Add Your Dish</a>







<ul id="TopNavigationUserControl1_LoginUl" class="nav pull-right">
<li class="dropdown"><a class="dropdown-toggle js-activated" href="#">Login<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="AutheticationRedirection.aspx?RedirectUrl=ListingNew.aspx" id="TopNavigationUserControl1_FaceBookRedirectUrl" tabindex="-1">FaceBook</a></li>
<li><a href="AutheticationRedirection.aspx?RedirectUrl=ListingNew.aspx" id="TopNavigationUserControl1_TwitterRedirectUrl" tabindex="-1">Twitter</a></li>
</ul>
</li>
</ul>
</div>
<!-- .nav-collapse -->
</div>
<!-- .container -->
</div>
<!-- .navbav-inner -->
</div>

<script>
// very simple to use!
$(document).ready(function () {
$('.js-activated').dropdownHover(true);
});
</script>





<div class="container" style="margin-top: 60px">
<div class="span12">
<div class="navbar-inner" style="text-align: center">
<h5>
Add New Dish</h5>
</div>
<div class="form-horizontal" style="margin-top: 10px">
<div class="control-group">
<label class="control-label" for="DishNameTextBox">
Dish Name</label>
<div class="controls">
<input name="ctl00$ContentPlaceHolderMain$DishNameTextBox" type="text" id="DishNameTextBox" name="DishNameTextBox" style="width:300px;" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="DishDescriptionTextBox">
Dish Description</label>
<div class="controls">
<textarea name="ctl00$ContentPlaceHolderMain$DishDescriptionTextBox" rows="20" cols="40" id="DishDescriptionTextBox" style="height:250px;width:500px;">
</textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="PeopleDropDownList">
People <i class="icon-question-sign" rel="tooltip" title="How many people can sufficiently eat in a single dish">
</i>
</label>
<div class="controls">
<select name="ctl00$ContentPlaceHolderMain$PeopleDropDownList" id="ContentPlaceHolderMain_PeopleDropDownList">
<option value="">-- Select --</option>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="5+">5+</option>

</select>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" name="ctl00$ContentPlaceHolderMain$btnSave" value="Connect To facebook and Save" id="ContentPlaceHolderMain_btnSave" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>


</form>

<script type="text/javascript">

$(document).ready(function () {

$('#mainform').validate({
rules: {
DishNameTextBox: "required",
DishDescriptionTextBox: { required: true }
},
highlight: function (label) {
alert('hi');
$(label).closest('.control-group').addClass('error');
},
success: function (label) {

label
.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});
});
</script>

</body>




For any one who is reading this

1) ClientModeID = "Static" will make your control ID static but not the name[name will be different if you are using master page]

2) Jquery validation plug in works both on name and id and both should be same.

I hope it will save some one's time.

Answer

You need to find out the name of your fields as rendered in the browser - I'm willing to bet that they aren't called DishNameTextBox and DishDescriptionTextBox.

More likely they are called something like

ctl00$ctl00$ContentPlaceHolderMain$DishNameTextBox

This is how asp.net renders form fields contained in a master page. Right click on the field and 'inspect element' in chrome/firefox, or view source and search for DishNameTextBox.

EDIT

you can see your input has two names jQuery validate won't play nicely with this. Perhaps this is to do with 'ClientIDMode="Static"' I don't know, but you need to fix this

<input name="ctl00$ContentPlaceHolderMain$DishNameTextBox" type="text" id="DishNameTextBox" name="DishNameTextBox" style="width:300px;" />