jquery validation is working but no validation message <p>I am working on a website using a purchased theme from wrapbootstrap and working specifically with its CONTACT FORM.</p> <p>You can check the demo of the contact form here: <a href="http://gridelicious.com/themes/treble/demo/#page-contact" rel="nofollow">CONTACT FORM DEMO</a></p> <p>The form is using validation that shows the floating message when the input is not as expected.</p> <p>the original html code for the form is just plain as below:</p> <pre><code>&lt;form&gt; &lt;input type="text" class="span12" placeholder="Title" required="required"&gt; &lt;input type="email" class="span12" placeholder="Email" required="required"&gt; &lt;textarea rows="10" class="span12" required="required"&gt;&lt;/textarea&gt; &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt; &lt;/form&gt; </code></pre> <p>then I changed the codes for my need and the validation stopped showing the messages but I am sure the validation in the background is working. I can see from the red highlight and the form is not submitted.</p> <p>here is the customized code of mine:</p> <pre><code>&lt;form&gt; &lt;input id="message-title" type="text" class="span12" placeholder="Name" required="required"&gt; &lt;input id="message-email" type="email" class="span12" placeholder="Email" required="required"&gt; &lt;textarea id="message-content" rows="10" class="span12" required="required"&gt;&lt;/textarea&gt; &lt;button type="submit" class="btn btn-primary SendMessage"&gt;Submit&lt;/button&gt; &lt;/form&gt; </code></pre> <p>What could be the problem that caused this?</p> <p>FYI: I am working in asp MVC 5 web site. So I am editing the HTML in razor view. I use the submit button in the form above to submit ajax request to one of my controllers.</p> <p>My SHORTCOMING: I am not good at javascript. I have been trying to find a javascript piece that controls the validation of the form, but I could not find it. If you guys check the source code of the <a href="http://gridelicious.com/themes/treble/demo/#page-contact" rel="nofollow">CONTACT FORM DEMO</a>, there is no jquery validation embedded.</p> <p>From all of the javascript documents embeded in the website, I am only suspicious for this one document. Lemme show the whole code below:</p> <pre><code>$(document).ready(function(){ /** * Global variables. */ var pageHeight = $(window).height(); var pageWidth = $(window).width(); var navigationHeight = $("#navigation").outerHeight(); /** * ON RESIZE, check again */ $(window).resize(function () { pageWidth = $(window).width(); pageHeight = $(window).height(); }); /** * ON LOAD */ /* Initialize scroll so if user droped to other part of page then home page. */ $(window).trigger('scroll'); /* Fix navigation. */ $('#navigation').fixedonlater({ speedDown: 250, speedUp: 100 }); /* Centralize elements on page. */ $('.centralized').centralized({ delay: 1500, fadeSpeed: 500 }); /* Make embeded videos responsive. */ $.fn.responsivevideos(); /* Carousel "Quote slider" initialization. */ $('#quote-slider').each(function(){ if($('.item', this).length) { $(this).carousel({ interval: 20000 }); } }); /* Scroll spy and scroll filter */ $('#main-menu').onePageNav({ currentClass: "active", changeHash: false, scrollOffset: navigationHeight - 10, scrollThreshold: 0.5, scrollSpeed: 750, filter: "", easing: "swing" }); /* * Paralax initialization. * Exclude for mobile. */ if(pageWidth &gt; 980){ /* Dont user paralax for tablet and mobile devices. */ $('#page-welcome').parallax("0%", 0.2); $('#page-features').parallax("0%", 0.07); $('#page-twitter').parallax("0%", 0.1); } /* Emulate touch on table/mobile touchstart. */ if(typeof(window.ontouchstart) != 'undefined') { var touchElements = [".social-icons a", ".portfolio-items li", ".about-items .item"]; $.each(touchElements, function (i, val) { $(val).each(function(i, obj) { $(obj).bind('click', function(e){ if($(this).hasClass('clickInNext')){ $(this).removeClass('clickInNext'); } else { e.preventDefault(); e.stopPropagation(); $(this).mouseover(); $(this).addClass('clickInNext'); } }); }); }); } /** * BLOCK | Navigation * * Smooth scroll * Main menu links * Logo click on Welcome page */ $('#page-welcome .logo a').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top - navigationHeight + 4 }, 800); /* Fix jumping of navigation. */ setTimeout(function() { $(window).trigger('scroll'); }, 900); return false; }); /** * PAGE | Welcome * * Initialize slider for welcome page H1 message. */ $('#welcome-messages ul').bxSlider({ mode: 'vertical', auto: true, minSlides: 1, responsive: true, touchEnabled: true, pager: false, controls: false, useCSS: false, pause: 10000 }); /** * PAGE | WORK * * .plugin-filter - Defines action links. * .plugin-filter-elements - Defines items with li. */ $('.plugin-filter').click(function(){ return false; }); $('.plugin-filter-elements').mixitup({ targetSelector: '.mix', filterSelector: '.plugin-filter', sortSelector: '.sort', buttonEvent: 'click', effects: ['fade','rotateY'], listEffects: null, easing: 'smooth', layoutMode: 'grid', targetDisplayGrid: 'inline-block', targetDisplayList: 'block', gridClass: '', listClass: '', transitionSpeed: 600, showOnLoad: 'all', sortOnLoad: false, multiFilter: false, filterLogic: 'or', resizeContainer: true, minHeight: 0, failClass: 'fail', perspectiveDistance: '3000', perspectiveOrigin: '50% 50%', animateGridList: true, onMixLoad: null, onMixStart: null, onMixEnd: null }); /** * PAGE | Twitter * * Pull latest tweets from user. * Configuration: /plugins/twitter/index.php */ $('#twitterfeed-slider').tweet({ modpath: 'plugins/twitter/', username: 'TheGridelicious', count: 3 }); $('#twitterfeed-slider').tweetCarousel({ interval: 7000, pause: "hover" }); }); /** * Ajax request. * Start loading. * Append loading notification. */ $( document ).ajaxSend( function() { /* Show loader. */ if($(".loading").length == 0) { $("body").append('&lt;div class="loading"&gt;&lt;div class="progress progress-striped active"&gt;&lt;div class="bar"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'); $(".loading").slideDown(); $(".loading .progress .bar").delay(300).css("width", "100%"); } }); /** * Reinitialize Scrollspy after ajax request is completed. * Refreshing will recalculate positions of each page in document. * Time delay is added to allow ajax loaded content to expand and change height of page. */ $( document ).ajaxComplete(function() { /* Remove loading section. */ $(".loading").delay(1000).slideUp(500, function(){ $(this).remove(); }); /* Portfolio details - close. */ $(".close-portfolio span").click(function(e) { $(".portfolio-item-details").delay(500).slideUp(500, function(){ $(this).remove(); }); window.location.hash= "!"; return false; }); }); </code></pre> <p>Please have a look and tell me if the setting is somewhere in this document, even though I dont think so, according to my knowledge which could be wrong.</p> <p>Please inform me other possibilities source for this problem. thanks</p>