Bootstrap表单转到顶部而不是出错

时间:2017-09-08 11:43:49

标签: twitter-bootstrap forms

所以这就是正在发生的事情。在我创建的每个网站上,我都使用这个表单,除了在一个网站上,当我点击发送时它到处都是空错误。在这里,它始终是最重要的。下面是我的代码,我剪了一些东西,因为它不是非常重要的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时,自定义错误会消失,但页面会滚动到错误,这就是好的部分。

1 个答案:

答案 0 :(得分:0)

LMFAO ..我发现了这个问题!在我的CSS中我有

overflow:hidden

这就是改变了。所以如果你的引导形式有问题,首先要找那个哈哈。