Error messages not appearing while Parsley.js is called in a form living inside a jQuery UI dialog?

Question

I have a form living inside q jQuery UI modal and Parsley.js is not working properly since the validation messages aren't being displayed on the UI.

This is the code I've been playing with:

$(function() {
  $('#order_push').click(function() {
    $('#add_contact').dialog('open');
  });

  $('#add_contact').dialog({
    title: "Add Contact",
    autoOpen: false,
    modal: true,
    width: 600,
    height: 300,
    buttons: {
      'Create': function() {
        var $form = $('#contact_frm').parsley();

        if ($form.isValid()) {
          alert('valid');
        }
      }
    }
  });
});

And here is a full example of the HTML and the JS working together. If you play a little bit with this Fiddle by leaving the fields empty you'll see how messages are not displayed. At least I would like my field to be marked in red if it's invalid or green if it's valid. Something like this

Did I miss something here?

Answer 1

You are calling isValid. The documentation states (in bold!):

isValid: Does not affect UI nor fires events.

You want to call validate({force: true}) (or whenValidate if doing async validation)