javascript - Validate multiple fields with Parsley? - Stack Overflow

I have three text input fields used for entering a date. I'd like to validate these to make sure they are, together, a valid date. I can write JavaScript to test that something is a date, but I can't see a way to use Parsley.js to validate multiple fields in one go, and provide a single error message.

My fields are like this:

<input type="number" name="date-day" value="" maxlength="2">
<input type="number" name="date-month" value="" maxlength="2">
<input type="number" name="date-year" value="" maxlength="4">

From this answer I suspect the answer is that this isn't (simply) possible, but it seems like quite a mon need, so I'd like to be 100% sure!

I have three text input fields used for entering a date. I'd like to validate these to make sure they are, together, a valid date. I can write JavaScript to test that something is a date, but I can't see a way to use Parsley.js to validate multiple fields in one go, and provide a single error message.

My fields are like this:

<input type="number" name="date-day" value="" maxlength="2">
<input type="number" name="date-month" value="" maxlength="2">
<input type="number" name="date-year" value="" maxlength="4">

From this answer I suspect the answer is that this isn't (simply) possible, but it seems like quite a mon need, so I'd like to be 100% sure!

• javascript
• validation
• parsley.js

Share Improve this question Follow edited May 23, 2017 at 11:45 CommunityBot 111 silver badge asked Dec 9, 2014 at 15:56 Phil GyfordPhil Gyford 14.8k1717 gold badges9898 silver badges168168 bronze badges 4

• Have you tried creating a custom validator? parsleyjs/doc/examples/customvalidator.html – mellis481 Commented Dec 9, 2014 at 16:00
• May I ask why do you need three fields? Is there a reason to not use a field with a datepicker? – Luís Cruz Commented Dec 10, 2014 at 14:37
• 1 I think datepickers can make sense for a date that's roughly 'now', but this is for a date of birth, and that can make the process more laborious. We're also opting for three fields rather than one because of research like this designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth – Phil Gyford Commented Dec 10, 2014 at 14:59
• I have got this working with custom validators now - I'll post an answer later when I get a chance. I wish the documentation had been better though :( – Phil Gyford Commented Dec 10, 2014 at 14:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here's roughly what I've ended up with. This is my HTML now:

<input type="number" name="dob-day" value="" maxlength="2" class="js-dob-day" required="required" data-parsley-date="js-dob">
<input type="number" name="dob-month" value="" maxlength="2" class="js-dob-month">
<input type="number" name="dob-year" value="" maxlength="4" class="js-dob-year">

I've added a unique class for each field, so I can get their values. And added required and data-parsley-date to the day input.

Here's my JavaScript to add a validator that checks the bined fields to see if they make a valid date. I've included two utility functions used within the validator, for pleteness. The validator relies on moment.js to check the final string for validity.

// Is `n` a number or numeric string (eg "3")?
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
};

// Pad `n` with `z` (or `0` by default) to `width`.
function zeroPad(n, width, z) {
    z = z || '0';
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
};


window.ParsleyValidator
    .addValidator(
        // Name of our validator.
        'date',

        // `value` will be the value entered into the day field.
        // `requirements` will be "js-dob" in our example.
        function(value, requirements) {
            var day     = $('.'+requirements+'-day').val(), // or value
                month   = $('.'+requirements+'-month').val(),
                year    = $('.'+requirements+'-year').val();

            if (isNumeric(day) === false
                || isNumeric(month) === false
                || isNumeric(year) === false) {
                return false;
            };

            day     = zeroPad(day, 2);
            month   = zeroPad(month, 2);
            year    = zeroPad(year, 4);

            // Use moment.js to make a date which we can then test for validity.
            var date = moment(year+'-'+month+'-'+day, 'YYYY-MM-DD');

            if (date.isValid()) {
                return true;
            } else {
                return false;
            };
        },

        // priority. Not sure how this works.
        34
    )
    .addMessage('en', 'date', "Enter a valid date");

Any suggestions more than wele!