Skip to content

Instantly share code, notes, and snippets.

@driehle
Last active February 11, 2021 15:09
Show Gist options
  • Save driehle/2909552 to your computer and use it in GitHub Desktop.
Save driehle/2909552 to your computer and use it in GitHub Desktop.
Render error messages of Backbone.Validation for Twitter Bootstrap
# --------------------------------------------
# This code is for Twitter Bootstrap 2!
# --------------------------------------------
#
# The MIT License (MIT)
# Copyright (c) 2012-2015 Dennis Riehle
#
# Permission is hereby granted, free of charge, to any person obtaining a copy
# of this software and associated documentation files (the "Software"), to deal
# in the Software without restriction, including without limitation the rights
# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
# copies of the Software, and to permit persons to whom the Software is
# furnished to do so, subject to the following conditions:
#
# The above copyright notice and this permission notice shall be included in all
# copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
# SOFTWARE.
# --------------------------------------------
_.extend Backbone.Validation.callbacks,
valid: (view, attr, selector) ->
control = view.$('[' + selector + '=' + attr + ']')
group = control.parents(".control-group")
group.removeClass("error")
if control.data("error-style") == "tooltip"
# CAUTION: calling tooltip("hide") on an uninitialized tooltip
# causes bootstraps tooltips to crash somehow...
control.tooltip "hide" if control.data("tooltip")
else if control.data("error-style") == "inline"
group.find(".help-inline.error-message").remove()
else
group.find(".help-block.error-message").remove()
invalid: (view, attr, error, selector) ->
control = view.$('[' + selector + '=' + attr + ']')
group = control.parents(".control-group")
group.addClass("error")
if control.data("error-style") == "tooltip"
position = control.data("tooltip-position") || "right"
control.tooltip
placement: position
trigger: "manual"
title: error
control.tooltip "show"
else if control.data("error-style") == "inline"
if group.find(".help-inline").length == 0
group.find(".controls").append("<span class=\"help-inline error-message\"></span>")
target = group.find(".help-inline")
target.text(error)
else
if group.find(".help-block").length == 0
group.find(".controls").append("<p class=\"help-block error-message\"></p>")
target = group.find(".help-block")
target.text(error)
# --------------------------------------------
# This code is for Twitter Bootstrap 3!
# Contributed by alex88 (github.com/alex88).
# --------------------------------------------
_.extend Backbone.Validation.callbacks,
valid: (view, attr, selector) ->
control = view.$('[' + selector + '=' + attr + ']')
group = control.parents('.form-group')
group.removeClass('has-error')
if control.data('error-style') == 'tooltip'
# CAUTION: calling tooltip('hide') on an uninitialized tooltip
# causes bootstraps tooltips to crash somehow...
control.tooltip 'hide' if control.data('tooltip')
else if control.data('error-style') == 'inline'
group.find('.help-inline.error-message').remove()
else
group.find('.help-block.error-message').remove()
invalid: (view, attr, error, selector) ->
control = view.$('[' + selector + '=' + attr + ']')
group = control.parents('.form-group')
group.addClass('has-error')
if control.data('error-style') == 'tooltip'
position = control.data('tooltip-position') || 'right'
control.tooltip
placement: position
trigger: 'manual'
title: error
control.tooltip 'show'
else if control.data('error-style') == 'inline'
if group.find('.help-inline').length == 0
group.find('.form-control').after('<span class=\'help-inline error-message\'></span>')
target = group.find('.help-inline')
target.text(error)
else
if group.find('.help-block').length == 0
group.find('.form-control').after('<p class=\'help-block error-message\'></p>')
target = group.find('.help-block')
target.text(error)
@driehle
Copy link
Author

driehle commented Jul 1, 2015

@scottbale it's most probably way too late for you (sorry, somehow I never got a notification for your comment), but I have added the MIT license!

@brycefisher I'd rather use Angular nowadays than backbone ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment