Parsley validation on button + custom validator not working

Question

I have a form, styled with bootstrap, that contains multiple fields (tel number, date, start time, end time...), meant to book bicycles.
When those fields are changed, a script checks throught ajax if a bicycle is free and change the class of a button (act as submit by default) from .btn-danger (red - no bicycle available) to .btn-success (green - You got one !) accordingly :

<form id='resa_velo_form' name='resa_velo_form' method='POST' action='index.php?app=resa&ctrl=AccueilUserCtrl&action=enregistreResaVelo'>
<div class='form-group col-md-3'>
    <label for="velo_date">Date d'emprunt : </label>
    <div class='input-group date' id='datetimepicker_deb'>
        <input type="text" id="velo_date" name="date_start" autocomplete="off" class="form-control" required>
        <span class="input-group-addon">
            <span class=" fa fa-calendar"></span>
        </span>
    </div>
</div>
<div class='form-group col-md-2'>
    <label for="velo_time_start">Départ :</label>
    <input id="velo_time_start" class="timepicker_input velo spinner" name="time_start" value="8:30" required>
</div>
<div class='form-group col-md-2'>
    <label for="velo_time_end">Retour : </label>
    <input id="velo_time_end" class="timepicker_input velo spinner" name="time_end" value="9:30" data-parsley-timeissup="#velo_time_start" required>
</div>
<div class='form-group col-md-5'>
    <label>&nbsp;</label>
    <button id="disponibilite_velo" class="error_resa btn btn-danger col-md-12" data-parsley-success='btn-success' required>Choisissez une date</button>
</div>
</form>

I managed to use Parsley to validate this form and even got to apply .has-error classes to form-group :

$('#resa_velo_form').parsley({
    successClass: "has-success",
    errorClass: "has-error",
    classHandler: function(el) {
            return el.$element.closest(".form-group");
    }
})

I'm using successfully a custom validator on start and end time :

window.Parsley.setLocale('fr');
window.Parsley.addValidator('timeissup', {
    requirementType: 'string',
    validateString: function(value, requirement) {
        time1 = $(requirement).val().split(/:/);
        time1 = time1[0] * 3600 + time1[1] * 60;
        time2 = value.split(/:/);
        time2 = time2[0] * 3600 + time2[1] * 60;
        return (time2 > time1);
    },
    messages: {
        en: 'This value should be higher than start time.',
        fr: "Cette valeur doit être supérieure à l'heure de départ."
    }
});

BUT THEN...

I tried to make a custom validator to check the class of the button :

window.ParsleyConfig = {
    excluded: 'input[type=hidden], :hidden, input[type=reset]',
    inputs: 'input, textarea, select, input[type=button], button, input[type=submit]'
};

window.Parsley.addValidator('success', {
    requirementType: 'string',
    validateString: function(value, requirement) {
        console.log('ok - Parlsey Valid Success');
        return ($('#disponibilite_velo').hasClass(requirement));
    },
    messages: {
        en: 'This button should be green !',
        fr: "Ce bouton doit être vert !"
    }
});

And it never works, Parlsey doesn't seems to use this validator, but still checks fields required and "timeissup" custom validator.

In fact, I managed to make it work by attaching it to an input field, but that's not the point.

Any help, please ?

since you named your function 'success' which parsley is already using in its own functions 'data-parsley-success', there could be a wording problem here. Try giving the validator another name (just for test) like "myValidator" and impement it like "data-parsley-my-validator" (you need a - before each camel case letter) — Marcel Wasilewski
That was a good point to check, but no. I tried changing the name and it didn't work. I even tried "success" on an input field and it DID work. It's like parsley won't validate button element despite adding it to the list. — Camuzic

Camuzic Camuzic · Accepted Answer · 2018-02-20T14:39:04

Got it to work !

Contrary to this answer, you need to define excluded and inputs in the form validator itself :

$('#resa_velo_form').parsley({
    successClass: "has-success",
    errorClass: "has-error",
    excluded: 'input[type=reset]',
    inputs: 'input, textarea, select, button',
    classHandler: function(el) {
        return el.$element.closest(".form-group");
    }
});

Other important thing : even if it's a button, you need the required attribute and a value different from '' (empty):

<button id="disponibilite_velo" class="error_resa btn btn-danger col-md-12" data-parsley-inputsuccess='btn-success' value='*' required>Choisissez une date</button>

Maybe not so clean, but... working !

Parsley validation on button + custom validator not working

BUT THEN...

1 Answers