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.

Comments

Post a Comment

Popular posts from this blog

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

Programming AD with C#.NET – part 4

Our transition to the  System.DirectoryServices.Protocols  has in the whole gone very smooth, but there have been some issues with one environment that contains subdomains. Most things are working fine, but writing to a subdomain does not work in the same way as it did before. What is generally bad with the  System.DirectoryServices.Protocols is the documentation, which is practically non-existent. But most things can  be figured out anyway since most classes just are wrappers for the wldap32.dll, which in turn is way better documented. I would like to have as little bindings to a specific server as possible but still be able to access the domain. In the  LdapConnection  it is possible to set the identifier to null and use the executing computer as a starting point to find a domain controller. But sometimes I must know that I am using a Global Catalog, and with more and more RODC in the environment I sometimes must know that I am working against a writeable domain controller.

User.Identity returns old login name after name change

When a person gets married or makes a name change for some other reason this usually means that the login name for the Active Directory-account changes as well. This is rarely a problem, but it turned out to cause some issues on our web server, where the  User.Identity  property was still returning the old login name. The user logged on with the new login name, but was identified by the web application as the old login name. The reason this occurs is because the  User.Identity  property relies on the  LsaLookupSids  method to convert the user SID to a login name. The method first calls the local  LSA-cache , which is not synchronized with the Active Directory. For this purpose a simple reboot of the web server to clear the  LSA-cache  propably would have sufficed. But since we didn't want to take the application offline rebooting was not an option. Instead, it is possible to set the registry value  LsaLookupCacheMaxSize in HKLM\SYSTEM\CurrentControlSet\Control\Lsa. If this val