javascriptvalidationparsley.js

Parsley Validation throwing: Validator `undefined` does not handle multiple values


I have a form in a modal I'm trying to manually POST using ajax after it has been successfully validated by Parsley. When the modal is opened, I first initialise Parsley on the form with:

modalLaunchers.createTaskFormValidation = $(document.getElementById('create-task-form')).parsley(parsleyOptions);

When the form is then submitted, I have the following code:

  modalLaunchers.createTaskFormValidation.validate();
  if (modalLaunchers.createTaskFormValidation.isValid()) {
         // do ajax POST
    }

If there are incorrect fields, these are correctly highlighted. However, if those fields are then corrected and the form resubmitted, I get the following error:

Uncaught Validator `undefined` does not handle multiple values

Both validate() and isValid() throw that error.

Obviously I want the form to be re-validated when submit is pressed again and if it is valid, continue to the POST. However, because that error is thrown it doesn't proceed any further. My Parsely options are below:

const parsleyOptions = {
    // errorsWrapper: '',
    errorTemplate: '<span class="error-msg"></span>',
    // successClass: 'has-success',
    errorClass: 'has-error',
    classHandler: (el) => {
        console.log(el.$element.closest('div.form-group'));
        return el.$element.closest('div.form-group');   
    },
    excluded: 'input.select2-search__field',
};

Any suggestions? Thanks a lot


Solution

  • I managed to get this to work, but using a try catch block around the validate. It's very odd because when the validate function throws the error when it is used again after the initial validation, it still updates the parsley object with whether the individual fields have failed or not (via the fields.field.validationResult property) and updates the UI with the failed fields. Thus the below works (though it does feel very messy):

                event.preventDefault();
                try {
                    modalLaunchers.createTaskFormValidation.validate();
                } catch (err) {
                    console.log(err);
                }
                if (modalLaunchers.createTaskFormValidation.fields.some(field => field.validationResult !== true) === false) {
    
        // ensure every field.validationResult is true. If it is, continue to the post, if not return and keep the UI errors
    
                }
    

    Still not sure if this is a bug or my incorrect implementation.