所以这就是正在发生的事情。在我创建的每个网站上,我都使用这个表单,除了在一个网站上,当我点击发送时它到处都是空错误。在这里,它始终是最重要的。下面是我的代码,我剪了一些东西,因为它不是非常重要的imo。
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">
<!-- Form -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="custom.css">
<!-- End Form -->
<link type="text/css" rel="stylesheet" href="style.css">
<?php include("fonts.php");?>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<!-- Mobile Menu -->
<link href="nav/sandbox.css" rel="stylesheet">
<link href="nav/drawer.css" rel="stylesheet">
<!-- Mobile Menu -->
</head>
<body class="drawer drawer--left">
<form id="contact-form" method="post" action="send.php" role="form">
Here is my form, this works fine. No problem here, for sure.
</form>
<!-- Form -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="validator.js"></script>
<script src="contact.js"></script>
<!-- End form -->
</div>
</div>
<div class="dotted"></div>
<?php include("footer.php");?>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<script src="https://cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.5/dropdown.min.js"></script>
<script src="nav/drawer.min.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$('.drawer').drawer();
});
</script>
<script src="jquery.backstretch.min.js"></script>
<script>
$.backstretch("background.jpg");
</script>
</body>
</html>
问题应该在jquery的某个地方。当我删除这个..
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
..我几乎得到了我想要的结果,除了我没有得到我的自定义错误,但标准错误。我真的不知道为什么这个网站正在努力解决这个问题。 Validator.js和contact.js与我在别处使用的相同。
希望有人有解决方案可以环顾四周..
编辑(validator.js)
/* ========================================================================
* Bootstrap (plugin): validator.js v0.10.2
* ========================================================================
+function ($) {
'use strict';
// VALIDATOR CLASS DEFINITION
// ==========================
function getValue($el) {
return $el.is('[type="checkbox"]') ? $el.prop('checked') :
$el.is('[type="radio"]') ? !!$('[name="' + $el.attr('name') + '"]:checked').length :
$.trim($el.val())
}
var Validator = function (element, options) {
this.options = options
this.$element = $(element)
this.$inputs = this.$element.find(Validator.INPUT_SELECTOR)
this.$btn = $('button[type="submit"], input[type="submit"]')
.filter('[form="' + this.$element.attr('id') + '"]')
.add(this.$element.find('input[type="submit"], button[type="submit"]'))
options.errors = $.extend({}, Validator.DEFAULTS.errors, options.errors)
for (var custom in options.custom) {
if (!options.errors[custom]) throw new Error('Missing default error message for custom validator: ' + custom)
}
$.extend(Validator.VALIDATORS, options.custom)
this.$element.attr('novalidate', true) // disable automatic native validation
this.toggleSubmit()
this.$element.on('input.bs.validator change.bs.validator focusout.bs.validator', Validator.INPUT_SELECTOR, $.proxy(this.onInput, this))
this.$element.on('submit.bs.validator', $.proxy(this.onSubmit, this))
this.$element.find('[data-match]').each(function () {
var $this = $(this)
var target = $this.data('match')
$(target).on('input.bs.validator', function (e) {
getValue($this) && $this.trigger('input.bs.validator')
})
})
}
Validator.INPUT_SELECTOR = ':input:not([type="submit"], button):enabled:visible'
Validator.FOCUS_OFFSET = 20
Validator.DEFAULTS = {
delay: 500,
html: false,
disable: true,
focus: true,
custom: {},
errors: {
match: 'Does not match',
minlength: 'Not long enough'
},
feedback: {
success: 'glyphicon-ok',
error: 'glyphicon-remove'
}
}
Validator.VALIDATORS = {
'native': function ($el) {
var el = $el[0]
return el.checkValidity ? el.checkValidity() : true
},
'match': function ($el) {
var target = $el.data('match')
return !$el.val() || $el.val() === $(target).val()
},
'minlength': function ($el) {
var minlength = $el.data('minlength')
return !$el.val() || $el.val().length >= minlength
}
}
Validator.prototype.onInput = function (e) {
var self = this
var $el = $(e.target)
var deferErrors = e.type !== 'focusout'
this.validateInput($el, deferErrors).done(function () {
self.toggleSubmit()
})
}
Validator.prototype.validateInput = function ($el, deferErrors) {
var value = getValue($el)
var prevValue = $el.data('bs.validator.previous')
var prevErrors = $el.data('bs.validator.errors')
var errors
if (prevValue === value) return $.Deferred().resolve()
else $el.data('bs.validator.previous', value)
if ($el.is('[type="radio"]')) $el = this.$element.find('input[name="' + $el.attr('name') + '"]')
var e = $.Event('validate.bs.validator', {relatedTarget: $el[0]})
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
var self = this
return this.runValidators($el).done(function (errors) {
$el.data('bs.validator.errors', errors)
errors.length
? deferErrors ? self.defer($el, self.showErrors) : self.showErrors($el)
: self.clearErrors($el)
if (!prevErrors || errors.toString() !== prevErrors.toString()) {
e = errors.length
? $.Event('invalid.bs.validator', {relatedTarget: $el[0], detail: errors})
: $.Event('valid.bs.validator', {relatedTarget: $el[0], detail: prevErrors})
self.$element.trigger(e)
}
self.toggleSubmit()
self.$element.trigger($.Event('validated.bs.validator', {relatedTarget: $el[0]}))
})
}
Validator.prototype.runValidators = function ($el) {
var errors = []
var deferred = $.Deferred()
var options = this.options
$el.data('bs.validator.deferred') && $el.data('bs.validator.deferred').reject()
$el.data('bs.validator.deferred', deferred)
function getErrorMessage(key) {
return $el.data(key + '-error')
|| $el.data('error')
|| key == 'native' && $el[0].validationMessage
|| options.errors[key]
}
$.each(Validator.VALIDATORS, $.proxy(function (key, validator) {
if ((getValue($el) || $el.attr('required')) &&
($el.data(key) || key == 'native') &&
!validator.call(this, $el)) {
var error = getErrorMessage(key)
!~errors.indexOf(error) && errors.push(error)
}
}, this))
if (!errors.length && getValue($el) && $el.data('remote')) {
this.defer($el, function () {
var data = {}
data[$el.attr('name')] = getValue($el)
$.get($el.data('remote'), data)
.fail(function (jqXHR, textStatus, error) { errors.push(getErrorMessage('remote') || error) })
.always(function () { deferred.resolve(errors)})
})
} else deferred.resolve(errors)
return deferred.promise()
}
Validator.prototype.validate = function () {
var self = this
$.when(this.$inputs.map(function (el) {
return self.validateInput($(this), false)
})).then(function () {
self.toggleSubmit()
self.focusError()
})
return this
}
Validator.prototype.focusError = function () {
if (!this.options.focus) return
var $input = $(".has-error:first :input")
if ($input.length === 0) return
$(document.body).animate({scrollTop: $input.offset().top - Validator.FOCUS_OFFSET}, 250)
$input.focus()
}
Validator.prototype.showErrors = function ($el) {
var method = this.options.html ? 'html' : 'text'
var errors = $el.data('bs.validator.errors')
var $group = $el.closest('.form-group')
var $block = $group.find('.help-block.with-errors')
var $feedback = $group.find('.form-control-feedback')
if (!errors.length) return
errors = $('<ul/>')
.addClass('list-unstyled')
.append($.map(errors, function (error) { return $('<li/>')[method](error) }))
$block.data('bs.validator.originalContent') === undefined && $block.data('bs.validator.originalContent', $block.html())
$block.empty().append(errors)
$group.addClass('has-error has-danger')
$group.hasClass('has-feedback')
&& $feedback.removeClass(this.options.feedback.success)
&& $feedback.addClass(this.options.feedback.error)
&& $group.removeClass('has-success')
}
Validator.prototype.clearErrors = function ($el) {
var $group = $el.closest('.form-group')
var $block = $group.find('.help-block.with-errors')
var $feedback = $group.find('.form-control-feedback')
$block.html($block.data('bs.validator.originalContent'))
$group.removeClass('has-error has-danger')
$group.hasClass('has-feedback')
&& $feedback.removeClass(this.options.feedback.error)
&& getValue($el)
&& $feedback.addClass(this.options.feedback.success)
&& $group.addClass('has-success')
}
Validator.prototype.hasErrors = function () {
function fieldErrors() {
return !!($(this).data('bs.validator.errors') || []).length
}
return !!this.$inputs.filter(fieldErrors).length
}
Validator.prototype.isIncomplete = function () {
function fieldIncomplete() {
return !getValue($(this))
}
return !!this.$inputs.filter('[required]').filter(fieldIncomplete).length
}
Validator.prototype.onSubmit = function (e) {
this.validate()
if (this.isIncomplete() || this.hasErrors()) e.preventDefault()
}
Validator.prototype.toggleSubmit = function () {
if (!this.options.disable) return
this.$btn.toggleClass('disabled', this.isIncomplete() || this.hasErrors())
}
Validator.prototype.defer = function ($el, callback) {
callback = $.proxy(callback, this, $el)
if (!this.options.delay) return callback()
window.clearTimeout($el.data('bs.validator.timeout'))
$el.data('bs.validator.timeout', window.setTimeout(callback, this.options.delay))
}
Validator.prototype.destroy = function () {
this.$element
.removeAttr('novalidate')
.removeData('bs.validator')
.off('.bs.validator')
.find('.form-control-feedback')
.removeClass([this.options.feedback.error, this.options.feedback.success].join(' '))
this.$inputs
.off('.bs.validator')
.removeData(['bs.validator.errors', 'bs.validator.deferred', 'bs.validator.previous'])
.each(function () {
var $this = $(this)
var timeout = $this.data('bs.validator.timeout')
window.clearTimeout(timeout) && $this.removeData('bs.validator.timeout')
})
this.$element.find('.help-block.with-errors').each(function () {
var $this = $(this)
var originalContent = $this.data('bs.validator.originalContent')
$this
.removeData('bs.validator.originalContent')
.html(originalContent)
})
this.$element.find('input[type="submit"], button[type="submit"]').removeClass('disabled')
this.$element.find('.has-error, .has-danger').removeClass('has-error has-danger')
return this
}
// VALIDATOR PLUGIN DEFINITION
// ===========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var options = $.extend({}, Validator.DEFAULTS, $this.data(), typeof option == 'object' && option)
var data = $this.data('bs.validator')
if (!data && option == 'destroy') return
if (!data) $this.data('bs.validator', (data = new Validator(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.validator
$.fn.validator = Plugin
$.fn.validator.Constructor = Validator
// VALIDATOR NO CONFLICT
// =====================
$.fn.validator.noConflict = function () {
$.fn.validator = old
return this
}
// VALIDATOR DATA-API
// ==================
$(window).on('load', function () {
$('form[data-toggle="validator"]').each(function () {
var $form = $(this)
Plugin.call($form, $form.data())
})
})
}(jQuery);
这个问题也可能存在于此,因为当我删除validator.js时,自定义错误会消失,但页面会滚动到错误,这就是好的部分。
答案 0 :(得分:0)
LMFAO ..我发现了这个问题!在我的CSS中我有
overflow:hidden
这就是改变了。所以如果你的引导形式有问题,首先要找那个哈哈。