Bootstrap validator with a required hidden input field

Question

I am using the bootrap validator library: http://1000hz.github.io/bootstrap-validator/

I have a form which includes a modal/ajax upload for a file, the result of which is to update a hidden field with a mediaId. That means that after the user completed uploading a file, my JS code sets the input field mediaId with some id.

I need to make sure the user has uploaded an image so I added required to the hidden field as follows:

<div class="form-group">
    <input id="mediaId" name="mediaId" required="true" type="hidden" value=""/>
    <div class="help-block with-errors"></div>
</div>

But unfortunately, no error message is shown and the user can submit the form. How to tack?

Answer 1

You can add data-validate="true" to the field.

From the documentation (http://1000hz.github.io/bootstrap-validator/#validator-fields):

The default selector used to determine which fields are validated is:

$.fn.validator.Constructor.INPUT_SELECTOR = ':input:not([type="hidden"], [type="submit"], [type="reset"], button)'

You can override this value from within your code if you need to change this default behavior. Alternatively, you can add data-validate="true" / data-validate="false" to a specific input to force its inclusion / exclusion in the set of validated fields.