views:

18

answers:

0

I am using jquery ketchup form my forms and i am having problems with the positioning of the error messages. The forms have different styles, so one is more of a

label input

structure. while another one is on a

label input

structure. this totally messes up my ketchup plugin since it is assuming im using the same styles on both forms. I tried adding different ketchups to the forms like so:

$('#new_booking').ketchup({
  showContainer: function(errorContainer) {
    errorContainer.slideDown('fast');
  },
  hideContainer: function(errorContainer) {
    errorContainer.slideUp('fast');
  }
});

$('#booking-detail-form').ketchup({
  positionContainer: function(errorContainer, field) {
    errorContainer.css({
      right: 0,
      left: field.width(),
      top: field.height() - errorContainer.height()
    });
  },
  showContainer: function(errorContainer) {
    errorContainer.slideDown('fast');
  },
  hideContainer: function(errorContainer) {
    errorContainer.slideUp('fast');
  }
});

Problem with this is that #new-booking inherits #booking-detail-form's styles. Any help on this?