Parsley JS 2.x - how do you validate hidden fields

Question

I would like to validate hidden fields, so essentially I want to remove input[type=hidden] from parsley's list of excluded form elements. I've tried explicitly setting excluded elements in parsley's options, but hidden fields are still not validated. E.g:

$(element).parsley({
    excluded: 'input[type=button], input[type=submit]'
});

Any thoughts on how to accomplish this, or what I'm doing wrong?

Answer 1

I had the same problem, yet even when I set up the global configuration it was not working. The problem essentially, was that I was redefining the options.

Global config:

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

In my code I had to dynamically change the inputs. Then, I set them to the default:

instance = $('form.parsley-validate').parsley(inputs: "input, textarea, select, input[type=hidden], :hidden")

Which I had to change to

instance = $('form.parsley-validate').parsley(inputs: "input, textarea, select, input[type=hidden], :hidden", excluded: 'input[type=button], input[type=submit], input[type=reset]')

To takeaway: If you change the config, you have to override all the settings.

Answer 2

This is definitely a bug in parsley, in fact someone has already opened an issue regarding it, see: https://github.com/guillaumepotier/Parsley.js/issues/664, but unfortunately nothing has been done yet. Basically, after analyzing the source code of parsley the issue is that the options of the parsleyFormInstance are being ignored if the field is already being excluded globally. There is the following if statement deciding this:

else if (this.$element.is(this.options.inputs) && !this.$element.is(this.options.excluded))

In order to solve this, I have added the following line of code:

options = parsleyFormInstance == null ? options : parsleyFormInstance.options;

exactly before the OptionsFactory is initialized on line 2160

this.OptionsFactory = new ParsleyOptionsFactory(ParsleyDefaults, ParsleyUtils.get(window, 'ParsleyConfig') || {}, options, this.getNamespace(options));

Answer 3

I'm guessing this is a bug.

Take this form:

<form method="post" id="myForm">
    <input type="text" name="field1" value="" class="required" />
    <input type="hidden" name="hiddeninput" value="" class="required" />
    <input type="submit" value="Go">
</form>

With the following javascript, even though we tell Parsley to validate hidden fields, it does not work:

$("#myForm").parsley({
    excluded: 'input[type=button], input[type=submit], input[type=reset]',
    inputs: 'input, textarea, select, input[type=hidden], :hidden',
});

However, if you define this as a global configuration, it does work

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

$("#myForm").parsley();

Answer 4

what i did was: make input field readonly and hide via css.

Answer 5

You can use the method of excluding hidden field when initializing parsley. But it comes with a downside for some scenarios where you have to dynamically hide/un-hide sections of form. Another alternative method is to override the "validated" event, and check inside if the field is hidden or not.

See the below code snippet:

$.listen('parsley:field:validated', function(fieldInstance){
if (fieldInstance.$element.is(":hidden")) {
    fieldInstance._ui.$errorsWrapper.css('display', 'none');
    fieldInstance.validationResult = true;
    return true;
}});