Hide Alert until parsley makes an error

Question

I have made a form using Parsley validation and put the alerts inside an alert bar using bootstrap.

Now I want the alert bar to be hidden until parsley triggers an error. I don't know enough about parsley to be able to do this. How could we do this?

You can find all my code and an example at: http://jsfiddle.net/7m7DR/2/ (although the validation doesn't seem to be working in the jsfiddle website) :/ ??

the alert bar looks like this:

<div class="alert">
    <ul id="alert" style="list-style-type:none;">
         <li style="list-style-type:none;"></li> 
    </ul>
</div>

Answer 1

You have to declare your parsley form in JS and override the default onFormSubmit Listener. Also hide your alert div with a css class and then remove the class when you want to display it.

$(function () {
   $('#someForm').parsley({
      listeners : {
        onFormSubmit : function (isFormValid, event) {
          if(!isFormValid) {
            //display your error div
          }
        }
      }
   });
});

If you want to add more specific messages to your alert take a look at the onFieldValidate and onFieldError listeners http://parsleyjs.org/documentation.html#javascript