Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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)
@kcivey

In place of $(view.el).find() you can use just view.$().

@driehle
Owner

edited, thanks ;)

@taavo

Note: If your fields aren't being set silently, "invalid" fields are still valid on the model. This means your error messages will be cleared by the "valid" callback as soon as you touch another field. This is easily fixed if you drop the following into the valid callback prior to any work being done:

    # If the input field is still in an invalid state, don't remove error
    if view.model.preValidate(attr, control.val())
      return

(Thanks for the very helpful gist.)

@stevemccartney

Thanks for the very useful gist.

This can be extended to work with backbone-deep-model, which uses '.' characters as path separators, by quoting the attributes in the control selector in both the valid and invalid sections as follows:

control = view.$('[' + selector + '=' + attr + ']')

becomes

 control = view.$('[' + selector + '="' + attr + '"]')
@webdevbyjoss

Same as above in plain JavaScript, possibly will be useful for someone like me who writes in plain JavaScript but still searches for rendering Backbone.Validation messages for Twitter Bootstrap forms

_.extend(Backbone.Validation.callbacks, {
  valid: function(view, attr, selector) {
    var control, group;
    control = view.$('[' + selector + '=' + attr + ']');
    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) {
    var control, group, position, target;
    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
      });
      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);
    }
  }
});
@gourneau

Thanks for the code @webdevbyjoss

@alex88

This should work fine with bootstrap 3

_.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)
@AVVS

LN #3 and LN#17

control = view.$('[' + selector + '=' + attr + ']')

to

control = view.$('[' + selector + '="' + attr + '"]')

it would allow for complex selectors

@musaid

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

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?

@scottbale

Ping @driehle.

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

@brycefisher

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...

@antenando

Agreed with @brycefisher :+1:

@driehle
Owner

@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
Something went wrong with that request. Please try again.