Single text field with multiple emails validation using Parsley?

Question

Simply put, is it possible to have a single HTML input field with multiple email addresses (comma or semi-colon separated) validated using Parsley?

I could not find that it is possible through their documentation so I am trying to see if there is anything I might be missing.

If the case is that it is not possible then I am open to best alternative solutions to combine with my current Parsley validation of the rest of the fields.

Your input is appreciated.

Answer 1

you can use multiple email addresses you must add this attribute multiple = "multiple" inside input element example:

<input type="email" multiple />

but I don't used Parsley

this is link to website where you can find example pattern for multiple email addresses example

Answer 2

the trick I came up with to validate comma separated input of emails with parsleyjs was to create a custom validator for a text field and rely on the browser's native support for validating multiple emails:

<input type="text" name="emails" required data-parsley-multipleemail>

(nb: we did not use <input type="email" multiple /> so this solution won't degrade to a proper email field.)

Parsley relies on the browser's native validators when available, so we'll do the same. (FYI using regexp for email validation is a pandoras box) Before loading Parsley.js, define a your custom validator like this:

window.ParsleyConfig = {
  validators: {
     multipleemail: {
       fn: function (value) {
         return $('<input type="email" multiple>').val(value)[0].checkValidity();
       },
       priority: 32
     }
   }
};

what this does is

1. create a virtual email input element
2. assign it the submitted value
3. [0] gets us the native javascript element (ie without jquery)
4. then we use the browsers native ValidityChecker which returns either true or false
5. return the result

lastly, insert this code after you load parsley to create a custom validation message (in english) for this validator:

window.ParsleyValidator && window.ParsleyValidator.addMessage('en', 'multipleemail', 'Invalid email(s)');