我正在使用wrapbootstrap中购买的主题并专门处理其联系表格的网站上工作。
您可以在此处查看联系表单的演示：CONTACT FORM DEMO
表单使用验证，当输入不符合预期时显示浮动消息。
表单的原始html代码如下所示：
<form>
<input type="text" class="span12" placeholder="Title" required="required">
<input type="email" class="span12" placeholder="Email" required="required">
<textarea rows="10" class="span12" required="required"></textarea>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
然后我根据需要更改了代码，验证停止显示消息，但我确信后台的验证工作正常。我可以从红色突出显示中看到表单未提交。
这是我的自定义代码：
<form>
<input id="message-title" type="text" class="span12" placeholder="Name" required="required">
<input id="message-email" type="email" class="span12" placeholder="Email" required="required">
<textarea id="message-content" rows="10" class="span12" required="required"></textarea>
<button type="submit" class="btn btn-primary SendMessage">Submit</button>
</form>
造成这种情况的原因是什么？
仅供参考：我在asp MVC 5网站上工作。所以我在剃刀视图中编辑HTML。我使用上面表单中的提交按钮向我的一个控制器提交ajax请求。
我的缺点：我不擅长javascript。我一直试图找到一个控制表单验证的javascript片段，但我找不到它。如果你们检查CONTACT FORM DEMO的源代码，则没有嵌入jquery验证。
从网站上嵌入的所有javascript文件中，我只对这一文件持怀疑态度。 Lemme显示以下整个代码：
$(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 > 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('<div class="loading"><div class="progress progress-striped active"><div class="bar"></div></div></div>');
$(".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;
});
});
请查看并告诉我该设置是否在本文档的某处，即使我不这么认为，根据我的知识可能是错误的。
请告知我这个问题的其他可能性来源。感谢