<p> help-block should be display:none when there are no errors.

[Einarsson]

Hello.

If you want to style the validation message with borders or backgrounds or whatever, it shows even when there is no error because the validation just removes or adds the validation error text, instead of hiding or showing the entire block.

<style type="text/css">
.aurelia-validation-message {
    border: 1px solid red;
    background: #ccc;
    padding: 5px;
}
</style>

<template>
  <section class="au-animate">
    <h2>Entity</h2>

    <form role="form" validate.bind="validation">
      <div class="form-group">
        <label for="fn">Name</label>
        <input type="text" value.bind="name" class="form-control" id="fn" placeholder="Name">
      </div>
      <div class="form-group">
        <label for="fn">Type</label>
        <input type="text" value.bind="type" class="form-control" id="fn" placeholder="Type">
      </div>
    </form>
  </section>
</template>

This will make an unvalidated form look like this:

It also, because of margin and padding, creates empty space below validated inputs, making a the spaces between inputs in a form have different heights, even if you don't change the styling.

Cheers!

[plwalters]

Thanks for submitting this / commenting on this. At this time we are closing this because we have completely re-written and are deprecating the previous feature set. If you feel this should be re-opened please feel free to review this blog post and submit either again on this repository, or on the new validatejs bridge repository

Thanks again!