Skip to content

Instantly share code, notes, and snippets.

@driehle

driehle/backbone-validation-bootstrap.js.coffee

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.
Download ZIP
Render error messages of Backbone.Validation for Twitter Bootstrap
Raw
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)
Raw
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)
@driehle
Copy link
Author

driehle commented Jun 14, 2012

edited, thanks ;)

@taavo
Copy link

taavo commented Sep 7, 2012

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
Copy link

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
Copy link

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
Copy link

gourneau commented Aug 5, 2013

Thanks for the code @webdevbyjoss

@alex88
Copy link

alex88 commented Aug 6, 2013

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
Copy link

AVVS commented Aug 14, 2013

LN #3 and LN#17

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

to

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

it would allow for complex selectors

@musaid
Copy link

musaid commented Aug 17, 2013

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
Copy link

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
Copy link

Ping @driehle.

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

@brycefisher
Copy link

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
Copy link

Agreed with @brycefisher 👍

@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