Bootstrap表单验证器不起作用

时间:2014-10-15 18:37:25

标签: html forms twitter-bootstrap validation

我试图通过验证获得引导程序表单。我看到this示例代码并尝试使用它。验证无效。我仔细阅读了文档,我需要的一切都在这里。不正确输入的每个表单元素都应立即弹出一条消息,说明错误。盒子也应该变红,但没有发生这种情况。对我毫无意义。请帮忙!

我脑子里的引导

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

HTML

<form data-toggle="validator" role="form">

      <div class="form-group">
        <label for="inputName" class="control-label">Name</label>
        <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
      </div>


      <div class="form-group">
        <label for="inputTwitter" class="control-label">Twitter</label>
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input type="text" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1000hz" required>
        </div>
        <span class="help-block with-errors">Up to 20 letters, numbers and underscores</span>
      </div>


      <div class="form-group">
        <label for="inputEmail" class="control-label">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
        <div class="help-block with-errors"></div>
      </div>


      <div class="form-group">
        <label for="inputPassword" class="control-label">Password</label>
        <div class="form-group col-sm-6">
          <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
          <span class="help-block">Minimum of 6 characters</span>
        </div>

        <div class="form-group col-sm-6">
          <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
          <div class="help-block with-errors"></div>
        </div>
        </div>
      </div>


      <div class="form-group">
        <div class="radio">
          <label>
            <input type="radio" name="underwear" required>
            Boxers
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="underwear" required>
            Briefs
          </label>
        </div>
      </div>


      <div class="form-group">
        <div class="checkbox">
          <label>
            <input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
            Check yourself
          </label>
          <div class="help-block with-errors"></div>
        </div>
      </div>


      <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>

    </form>

2 个答案:

答案 0 :(得分:2)

你必须在页面上包含验证者。如果您不这样做,验证器将无法使用。这是链接:

<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>

答案 1 :(得分:-2)

使用以下validator.js

+function ($) {
    'use strict';
    // VALIDATOR CLASS DEFINITION
    // ==========================
    var Validator = function (element, options) {
        this.$element = $(element)
        this.options = options
        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', $.proxy(this.validateInput, 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) {
                $this.val() && $this.trigger('input.bs.validator')
            })
        })
    }
    Validator.INPUT_SELECTOR = ':input:not([type="submit"], button):enabled:visible'
    Validator.DEFAULTS = {
        delay: 500,
        html: false,
        disable: 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.validateInput = function (e) {
        var $el = $(e.target)
        var prevErrors = $el.data('bs.validator.errors')
        var errors
        if ($el.is('[type="radio"]')) $el = this.$element.find('input[name="' + $el.attr('name') + '"]')
        this.$element.trigger(e = $.Event('validate.bs.validator', { relatedTarget: $el[0] }))
        if (e.isDefaultPrevented()) return
        var self = this
        this.runValidators($el).done(function (errors) {
            $el.data('bs.validator.errors', errors)
            errors.length ? 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 (($el.data(key) || key == 'native') && !validator.call(this, $el)) {
                var error = getErrorMessage(key)
                !~errors.indexOf(error) && errors.push(error)
            }
        }, this))
        if (!errors.length && $el.val() && $el.data('remote')) {
            this.defer($el, function () {
                var data = {}
                data[$el.attr('name')] = $el.val()
                $.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 delay = this.options.delay
        this.options.delay = 0
        this.$element.find(Validator.INPUT_SELECTOR).trigger('input.bs.validator')
        this.options.delay = delay
        return this
    }
    Validator.prototype.showErrors = function ($el) {
        var method = this.options.html ? 'html' : 'text'
        this.defer($el, function () {
            var $group = $el.closest('.form-group')
            var $block = $group.find('.help-block.with-errors')
            var $feedback = $group.find('.form-control-feedback')
            var errors = $el.data('bs.validator.errors')
            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')
            $feedback.length
              && $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')
        $feedback.length
          && $feedback.removeClass(this.options.feedback.error)
          && $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.$element.find(Validator.INPUT_SELECTOR).filter(fieldErrors).length
    }
    Validator.prototype.isIncomplete = function () {
        function fieldIncomplete() {
            return this.type === 'checkbox' ? !this.checked :
                   this.type === 'radio' ? !$('[name="' + this.name + '"]:checked').length :
                                              $.trim(this.value) === ''
        }
        return !!this.$element.find(Validator.INPUT_SELECTOR).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
        var $btn = $('button[type="submit"], input[type="submit"]')
          .filter('[form="' + this.$element.attr('id') + '"]')
          .add(this.$element.find('input[type="submit"], button[type="submit"]'))
        $btn.toggleClass('disabled', this.isIncomplete() || this.hasErrors())
    }
    Validator.prototype.defer = function ($el, callback) {
        callback = $.proxy(callback, this)
        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')
        this.$element.find(Validator.INPUT_SELECTOR)
          .off('.bs.validator')
          .removeData(['bs.validator.errors', 'bs.validator.deferred'])
          .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').removeClass('has-error')
        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);