Render error messages of Backbone.Validation for Twitter Bootstrap

backbone-validation-bootstrap.js.coffee

# --------------------------------------------
# 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)

backbone-validation-bootstrap3.js.coffee

# --------------------------------------------
# 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)

If you are going to have input fields names like this,

...
    <input name="clients[address][street]" type="text" >
...

The following code should work well.

_.extend(Validation.callbacks, {
    valid: function(view, attr, selector) {
        // compose the attr - for complex situations
        var arr = attr.split('.'),
            el = '';
        for (var i = 0; i < arr.length; i++) {
            if (i === 0) el += arr[i];
            else el += '[' + arr[i] + ']';
        }

        var control, group;
        control = view.$('[' + selector + '="' + el + '"]');
        group = control.parents(".control-group");
        group.removeClass("error");

        if (control.data("error-style") === "tooltip") {
            if (control.data("tooltip")) {
                return control.tooltip("hide");
            }
        } else if (control.data("error-style") === "inline") {
            return group.find(".help-inline.error-message").remove();
        } else {
            return group.find(".help-block.error-message").remove();
        }
    },

    invalid: function(view, attr, error, selector) {
        // compose the attr - for complex situations
        var arr = attr.split('.'),
            el = '';
        for (var i = 0; i < arr.length; i++) {
            if (i === 0) el += arr[i];
            else el += '[' + arr[i] + ']';
        }

        var control, group, position, target;
        control = view.$('[' + selector + '="' + el + '"]');
        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
            });
            return 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");
            return 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");
            return target.text(error);
        }
    }
});

So I hate to be that guy but, @driehle, could you add a license to this gist?

We are actually using this gist in production for exactly what it's written for - binding Backbone.Validation to twitter bootstrap. It works like a charm. However, the lawyers recently reviewed our code and turned up this gist not having a license. Sigh.

Also not sure if you're aware of this but the Backbone.Validation FAQ actually links directly to this gist: http://thedersen.com/projects/backbone-validation/#faq/how-can-i-use-it-with-twitter-bootstrap. Perhaps there's an opportunity here to promote this gist to its own full-fledged project and get that FAQ updated?

Ping @driehle.

(Sorry to be a pest; I blame The Laywers.)

This is getting enough attention that it feels like it should become a proper github project with issues and pull requests, and maybe an organization with multiple committers to maintain it...

Agreed with @brycefisher 👍

@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 ;)