parsley js - conditional required if checkbox checked

Mark Steggles picture Mark Steggles · Feb 12, 2015 · Viewed 16.4k times · Source

Is there an easy way with parsleyjs to make a field required depending on another field?

See my js fiddle here http://jsfiddle.net/marksteggles/wbhLq0t4/1/

<form data-parsley-validate="true">
    <div class="form-group">
        <label>
            <input name="request_signature" type="checkbox" />Require signature</label>
        <div class="request_signature_fields">
            <textarea class="form-control required" name="signature_reason" rows="3"></textarea>
        </div>
    </div>
    <input class="btn btn-success" name="commit" type="submit" value="Send" />
</form>

Answer

ced-b picture ced-b · Apr 7, 2016

Minimally as of 2.2.0 you can create a custom validator:

window.Parsley.addValidator("requiredIf", {
   validateString : function(value, requirement) {
      if (jQuery(requirement).val()){
         return !!value;
      } 

      return true;
   },
   priority: 33
})

This gets applied in such a way:

<textarea 
   class="form-control required" 
   name="signature_reason" 
   rows="3"
   data-parsley-validate-if-empty="true"
   data-parsley-required-if="#my-field-to-check"
></textarea>

Explanation

data-parsley-required-if is the custom validator we just defined. It takes any arbitrary jQuery selector and if that field contains a non-falsy value it ensures that this field is not empty.

data-parsley-validate-if-empty is needed to ensure that the field is being validated at all, because Parsley does not validate empty non-required fields by default.

More data on custom validators here: http://parsleyjs.org/doc/index.html#custom