Have it your way. Error-Container styling and behaviour.

Ketchup provides some callbacks to completely control the markup and show/hide behaviour of the error-container, which simply can be styled via CSS. Lets check out these callbacks and create an alternative Ketchup.

Example Form

<form action="index.html" id="example2">
  <div>
    <label for="ex2_username">Username</label>
    <input type="text" id="ex2_username" rel="validate(required,username,rangelength(5,20))" />
  </div>
  <div>
    <label for="ex2_email">E-Mail</label>
    <input type="text" id="ex2_email" rel="validate(required,email)" />
  </div>
  <div class="submit">
    <input type="Submit" value="(Try to) Submit" />
  </div>
</form>

Alternative Attribute for the validate() functions

You may have noticed that we put the validate() functions not in the class but the rel attribute. Tell Ketchup where to look for validate() functions via the validationAttribute parameter:

$('#example2').ketchup({
  validationAttribute: 'rel'
});

Your own error-container markup

Ketchup don't force any markup on you. Build your own error-container, either with HTML code in a string or the element builder as shown in the example via the errorContainer parameter:

Important: Your error-container must contain an empty ordered list somewhere (<ol></ol>). Validation errors will be inserted there.

$('#example2').ketchup({
  validationAttribute: 'rel',
  errorContainer: $('<div>', {
    'class': 'ketchup-error-container-alt',
    html: '<ol></ol>'
  })
});

Set initial position for your error-container

You can position your error-container initially when the DOM is loaded. This is good if you want to have an overlay effect like in the default behaviour. In this example we want to display validation errors below the text fields. The initialPositionContainer callback gives you errorContainer and field arguments to work with. In this example we don't need to position our error-container so we overwrite this callback with an empty function:

$('#example2').ketchup({
  validationAttribute: 'rel',
  errorContainer: $('<div>', {
    'class': 'ketchup-error-container-alt',
    html: '<ol></ol>'
  }),
  initialPositionContainer: function(errorContainer, field) {
    //errorContainer = the error-container with all childs
    //field = the field that needs to get validated
  }
});

Re-set the error-container position

You also can re-set the error-container when the number of validation errors change. This is done via the positionContainer callback. Again this callback provides the errorContainer and field arguments. Our example always appears under the field to validate, so we do not want to re-set the error-container position so we call an empty function again:

$('#example2').ketchup({
  validationAttribute: 'rel',
  errorContainer: $('<div>', {
    'class': 'ketchup-error-container-alt',
    html: '<ol></ol>'
  }),
  initialPositionContainer: function(errorContainer, field) {
    //errorContainer = the error-container with all childs
    //field = the field that needs to get validated
  },
  positionContainer: function(errorContainer, field) {}
});

Show and hide the error-container

The showContainer and hideContainer callbacks gives you control how the error-container is shown when validation errors occur and how to hide when there are no validation errors. In our example we use slideDown when there are validation errors and slideUp when everything is OK:

$('#example2').ketchup({
  validationAttribute: 'rel',
  errorContainer: $('<div>', {
    'class': 'ketchup-error-container-alt',
    html: '<ol></ol>'
  }),
  initialPositionContainer: function(errorContainer, field) {
    //errorContainer = the error-container with all childs
    //field = the field that needs to get validated
  },
  positionContainer: function(errorContainer, field) {},
  showContainer: function(errorContainer) {
    errorContainer.slideDown('fast');
  },
  hideContainer: function(errorContainer) {
    errorContainer.slideUp('fast');
  }
});

Style your error-container

Since you have the control over the error-container markup you also have full control over the styling. This is our example CSS:

.ketchup-error-container-alt { margin: 10px; width: 510px; display: none; }
.ketchup-error-container-alt li {
  background: #F04D5B;
  color: black;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  margin-bottom: 3px;
  boder-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

Outcome (Try to submit the form)

Username

E-Mail