title: jQuery Validation plugin error message on bootstrap popover
body: <p>I am trying to show validation error message in bootstrap popover as mentioned in this question :</p>
  
  <p><a href="https://stackoverflow.com/questions/8439490/how-to-use-twitter-bootstrap-popovers-for-jquery-validation-notifications">How to use Twitter Bootstrap popovers for jQuery validation notifications?</a></p>
  
  <p>But for some reason my code won't work.</p>
  
  <p>Here is my code:</p>
  
  <p>index.jsp</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%&gt;
  &lt;%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %&gt;
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
  
          &lt;!-- Website Title &amp; Description for Search Engine purposes --&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta name="description" content=""&gt;
  
          &lt;!-- Mobile viewport optimized --&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" &gt;
          &lt;link rel="stylesheet" type="text/css" href="includes/css/bootstrap-glyphicons.css" &gt;
  
  
          &lt;!-- Custom CSS --&gt;
          &lt;link href="includes/css/styles.css" rel="stylesheet"&gt;
  
  
          &lt;!-- Include Modernizr in the head, before any other Javascript --&gt;
          &lt;script src="includes/js/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
      ${greeting}
  
  
      &lt;div class="container" id="main"&gt;
  
      &lt;div class="navbar navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
  
          &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
          &lt;button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;a class="navbar-brand" href="/"&gt;ORG Info&lt;/a&gt;
  
          &lt;div class="nav-collapse collapse navbar-responsive-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;
                      &lt;a href="home.html"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Services &lt;strong class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
  
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Web Design&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;Web Development&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;SEO&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li class="divider"&gt;&lt;/li&gt;
  
                          &lt;li class="dropdown-header"&gt;More Services&lt;/li&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;Content Creation&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;Social Media Marketing&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;&lt;!-- end dropdown-menu --&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;form class="navbar-form pull-left"&gt;
                  &lt;input type="text" class="form-control" placeholder="Search this site..." id="searchInput"&gt;
                  &lt;button type="submit" class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;/form&gt;&lt;!-- end navbar-form --&gt;
  
              &lt;ul class="nav navbar-nav pull-right"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; My Account &lt;strong class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
  
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-wrench"&gt;&lt;/span&gt; Settings&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-refresh"&gt;&lt;/span&gt; Update Profile&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-briefcase"&gt;&lt;/span&gt; Billing&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li class="divider"&gt;&lt;/li&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt; Sign out&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;&lt;!-- end nav pull-right --&gt;
          &lt;/div&gt;&lt;!-- end nav-collapse --&gt;
  
      &lt;/div&gt;&lt;!-- end container --&gt;
  &lt;/div&gt;&lt;!-- end navbar --&gt;
  
  
  &lt;!-- form start --&gt;
  &lt;!--validation msg start  --&gt;
  &lt;div class="popover right"&gt;
        &lt;div class="arrow"&gt;&lt;/div&gt;
        &lt;h3 class="popover-title"&gt;Popover right&lt;/h3&gt;
        &lt;div class="popover-content"&gt;
          &lt;p&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;!--validation msg end  --&gt;
  
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;button type="button" id="examplebtn" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."&gt;
    Popover on left
  &lt;/button&gt;
  
  
  &lt;div class="row"&gt;
  &lt;div class="col-sm-6"&gt;
  &lt;form:form id="idCompanyReg" action="greeting.html" method="post" commandName="regform" enctype="multipart/form-data" class="form-horizontal" role="form" &gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Reg Form&lt;/legend&gt;
  
  &lt;div class="form-group"&gt;
  &lt;form:label  path="name"&gt;Organization Name&lt;/form:label&gt;
  &lt;form:input path="name" class="form-control input-medium required" placeholder="please enter name"  /&gt;
  &lt;/div&gt;
  &lt;!-- 
   &lt;div class="form-group"&gt;
  &lt;label for="client_email"&gt;Email&lt;/label&gt;
  &lt;div class="input-group"&gt;
  &lt;span class="input-group-addon"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;input id="client_email" name="client[email]" class="required email form-control" placeholder="Your Email" type="text"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  --&gt;
  
  
  
  &lt;div class="form-group"&gt;
  &lt;form:label path="type"&gt;Type(select one)&lt;/form:label&gt;
  &lt;form:select class="form-control" path="type"&gt;
     &lt;form:option class="form-control" value=""&gt;Select one&lt;/form:option&gt;
     &lt;form:option class="form-control" value="IT related company"&gt;IT related company&lt;/form:option&gt;
     &lt;form:option class="form-control" value="Hospital"&gt;Hospital&lt;/form:option&gt;
     &lt;form:option class="form-control" value="Educational Organization"&gt;Educational organizations&lt;/form:option&gt;
     &lt;form:option class="form-control" value="Other"&gt;Other&lt;/form:option&gt;
  &lt;/form:select&gt; 
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
  &lt;form:label path="place"&gt;Place:&lt;/form:label&gt;
  &lt;form:input path="place" class="form-control"/&gt;
  &lt;/div&gt;
  
  
  &lt;div class="form-group"&gt;
  &lt;form:label for="description" path="description"&gt;Description&lt;/form:label&gt;
  &lt;form:textarea path="description" class="form-control"/&gt;
  &lt;/div&gt;
  
  
  
  
  
  
  
  
  &lt;input type="file" name="file" title="Search for a profile pic to add..." class="btn btn-primary" &gt;
  
  
  
  &lt;!-- &lt;input type="file" id="file" name="file" /&gt; --&gt;
  
  &lt;/fieldset&gt;
   &lt;hr/&gt;
              &lt;p&gt;&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;&lt;/p&gt;
  &lt;/form:form &gt;
  
  &lt;/div&gt;
  
  
  &lt;div class="col-sm-6"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- form end --&gt;
  
  
      &lt;div class="carousel slide" id="myCarousel"&gt;
  
      &lt;/div&gt;&lt;!-- end myCarousel --&gt;
  
  
      &lt;div class="row" id="bigCallout"&gt;
  
      &lt;/div&gt;&lt;!-- end row --&gt;
  
  
      &lt;div class="row" id="featuresHeading"&gt;
  
      &lt;/div&gt;&lt;!-- end row --&gt;
  
  
      &lt;div class="row" id="features"&gt;
  
      &lt;/div&gt;&lt;!-- end row --&gt;
  
  
      &lt;div class="row" id="moreInfo"&gt;
  
      &lt;/div&gt;&lt;!-- end row --&gt;
  
  
      &lt;div class="row" id="moreCourses"&gt;
  
      &lt;/div&gt;&lt;!-- end row --&gt;
  
  &lt;/div&gt;&lt;!-- end container --&gt;
  
  
  &lt;footer&gt;
  
  &lt;/footer&gt;
  
  
      &lt;!-- All Javascript at the bottom of the page for faster page loading --&gt;
  
      &lt;!-- First try for the online version of jQuery--&gt;
      &lt;script src="js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- If no online access, fallback to our hardcoded version of jQuery --&gt;
      &lt;script&gt;window.jQuery || document.write('&lt;script src="includes/js/jquery-1.8.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
  
      &lt;!-- Bootstrap JS --&gt;
      &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom JS --&gt;
  
      &lt;script src="includes/js/bootstrap.file-input.js"&gt;&lt;/script&gt;
  
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script src="includes/js/index.js"&gt;&lt;/script&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>$(document).ready(function(){
      $('#examplebtn').popover('show');
  
  
      $("#idCompanyReg").validate({
            rules: {
              name: {
                minlength: 3,
                required: true
              },
              place:{
                minlength: 3,
                required: true
              }
            },
            showErrors: function(errorMap, errorList) {
              $.each(this.successList, function(index, value) {
                return $(value).popover("hide");
              });
              return $.each(errorList, function(index, value) {
                var _popover;
                console.log(value.message);
                _popover = $(value.element).popover({
                  trigger: "manual",
                  placement: "top",
                  content: value.message,
                  template: "&lt;div class=\"popover\"&gt;&lt;div class=\"arrow\"&gt;&lt;/div&gt;&lt;div class=\"popover-inner\"&gt;&lt;div class=\"popover-content\"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"
                });
                _popover.data("popover").options.content = value.message;
                return $(value.element).popover("show");
              });
            }});
  
  
  
  });
  
  //document.ready end
  </code></pre>
  
  <p>error message :</p>
  
  <pre><code>TypeError: _popover.data(...) is undefined
  
  
  _popover.data("popover").options.content = value.message;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3qYpM/413/" rel="nofollow noreferrer">JSFIDDLE</a></p>