Skip to main content

Using Bootstrap Tooltip to show Parsley validation errors

I'm currently working on a web application using a variety of different frameworks, such as Backbone for the back-end, Bootstrap for the front-end and Parsley for client side form validation. Parsley is a really powerful validation toolkit, but it takes some tweaking to make it blend with the Bootstrap front-end. Fortunately this is a one time fix, which can be re-used all over our project.

Since there will be some custom options in our Parsley object, we can't use the default parsley-validate attribute on the form. Instead we have to initialize the validation with the jQuery syntax:

$('#my-form').parsley(parsleyOptions);

The options are were the magic happens, and in our case we have a global options object that our forms use to get the same experience all over the application. Here's what it looks like:

var parsleyOptions = {
  // Sets success and error class to Bootstrap class names
  successClass: 'has-success',
  errorClass: 'has-error',

  // Bootsrap needs success/error class to be set on parent element
  errors: {
    classHandler: function(el) {
      return el.parent();
    },
    // Set these to empty to make sure the default Parsley elements are not rendered
    errorsWrapper: '',
    errorElem: ''
  },
  listeners: {
    // Show a tooltip when a validation error occurs
    onFieldError: function (elem, constraints, parsleyField) {
      elem.tooltip({
        animation: false,
        container: 'body',
        placement: 'top',
        title: elem.data('error-message')
      });
    },
    // Hide validation tooltip if field is validated
    onFieldSuccess: function(elem, constraints, parsleyField) {
      elem.tooltip('destroy');
    }
  }
};

There are, of course, some caveats with this approach. By default, Parsley has a fallback to some default error messages and multiple validation errors is normally shown if there are multiple errors. The approach above reguires the data-error-message attribute on all validated fields and only one message for each field will be displayed.
Labels:

Comments

Post a Comment

Popular posts from this blog

Binding a HTML-formatted string to a WPF WebBrowser control

Sometimes there is a need to display a HTML formatted string in a WPF application. There are a couple of ways to do this, but the most stright forward is to use a WebBrowser control and the NavigateToString method. This approach has one big flaw, you cannot use binding to a string out of the box, but I found a great solution through Stack Overflow which adds a bindable property to the  WebBrowser  control using  NavigateToString . The following class is all that is needed to add that behavior. A new depencency property named Html is introduced to the  WebBrowser  and the proper change action is performed in the OnHtmlChanged method. public class BrowserBehavior { public static readonly DependencyProperty HtmlProperty = DependencyProperty.RegisterAttached( "Html", typeof(string), typeof(BrowserBehavior), new FrameworkPropertyMetadata(OnHtmlChanged)); [AttachedPropertyBrowsableForType(typeof(WebBrowser))] public static string GetHtml(WebBrowser bro
1 comment
Read more

Binding Enum with DescriptionAttribute in WPF

Binding an enumeration to a ComboBox can be done in several ways. In most cases you don't want to display the value itself, but a more user friendly description. One common approach is to use the DescriptionAttribute on the Enum values to supply a description for each value.  This is all possible in a very MVVM friendly way. First step is to add the  DescriptionAttribute  to the values of the enumeration. public enum MyValues { [Description("First value")] First, [Description("Second value")] Second } To retrieve the description from the enum we use a simple extension method. This method returns the value of the DescriptionAttribute if it exists, otherwise the string representation of the enum value is returned. public static string GetDescription(this Enum value) { var fieldInfo = value.GetType().GetField(value.ToString()); var attribute = fieldInfo.GetCustomAttributes(typeof(DescriptionAttribute), false).FirstOrDefault() as
2 comments
Read more

Google+ finally for everyone!

There have been a lot of whining on Google from their Apps-users since the launch of  Google+  for everyone with a regular Google-account. The Apps-users have not been able to use  Google+ , until now! (actually  october 27 ) As usual I am impressed with most of the things Google accomplishes, but now when all of their services have gotten a visual and functional touchup I am getting really impressed. As someone at an early stage pointed out it is really sweet of Google to play naive and let me fill in my profile information when I create my profile (as if Google did not already know), but after a few clicks I am on the go. My albums from Picasa is automatically integrated and even the pictures I have uploaded to this blog is shown in  Google+ . But what happens next? Practically no one of my friends are on  Google+  so what do I use it for? I guess we will see. Hopefully there will be even more integration between the social networks in the future. I am anyhow very satified with
1 comment
Read more