How do I show what validation errors Parsley.js has found?

Question

I'm using Parsley.js to validate part of a form like in this example. However, the validate() method always returns false, even when that piece of form should validate.

No error messages are displaying, and I want to see what it is that's failed validation.

I can't see a way to get Parsley to simply return all the errors found, so I can see them in the console. Have I missed something obvious?

Ambitendency

Can you add your code so we can figure out what's happening? – Edgerton

Usually I'd be happy to prepare a minimal example of a problem but I'm not sure it helps in this case... I simply want to know if it's possible to see why Parsley thinks a form doesn't validate. – Ambitendency

Answer 1

You can use something like this:

window.Parsley.on('field:error', function() {
  // This global callback will be called for any field that fails validation.
  console.log('Validation failed for: ', this.$element);
});

from http://parsleyjs.org/doc/index.html#events

Emancipated

'field:error' triggered even .validate() are not called(i.e. on change). I think 'form:error' event is better option if you want to show errors on form submission. – Ornithosis

Answer 2

There are probably (hopefully) better ways to do this, but this kind of thing is what I ended up using to get some insight into what's being validated and what is/isn't passing:

function validateAnswers(groupName) {

    var formInstance = $('.my-form').parsley();
    var isValid = formInstance.validate(groupName);

    // Just for debugging:
    $.each(formInstance.fields, function(idx, field) {
        if (typeof field.validationResult === 'boolean') {
            // Validated.
            console.log('Passed: ' + field.value);
        }  else if (field.validationResult.length > 0) {
            console.log('Failed: ' + field.validationResult[0].assert.name);
        }
    });

    return isValid;
}

This worked on my very simple form with 'required' radio buttons; no idea how it would work on larger forms with different types of fields and validation requirements.

Any better answers or improvements?

Ambitendency

I did something similar but returned an object like: errorsList[formElement.$element[0].id] = errors; – Demilune

Answer 3

Here's what I did for this type of situation.

 var formElements = $('form .elementClass').parsley(); // Get all elements inside your form

// Loop through all the elements found
_.forEach(formElements, function(formElement) {  //You can use a regular for loop if you prefer
     var errors = ParsleyUI.getErrorsMessages(formElement);  //Get the list of errors for this element
     if (errors.length) {
         // Output the first error in the array.  You could loop this too.
         console.log(errors[0]);
     }
});

It feels a bit ugly, but it gets you what you need.

Brainwashing