CODEWITHSUNDEEP
jqueryhtmlvalidationparsley.jscustomvalidator
serhio
serhio

Reputation: 28586

Parsley example from site does not work?

I use the Parsley example from the documetation page site:

I save a page on my hard drive with the folowing content: 

<form id="demo-form" data-parsley-validate>
  <label for="question">Do you code? *</label>
  <p>
    <input type="radio" name="question1" value="true" required /> Yes
    <input type="radio" name="question1" value="false" /> No
  </p>

  <label for="languages">If yes, in which language(s)?</label>
  <input type="text" class="form-control" name="languages" data-parsley-conditionalrequired='["[name=\"question1\"]:checked", "yes"]' data-parsley-validate-if-empty data-parsley-success-class="" data-parsley-conditionalrequired-message="This value is required since you are a programmer!" />

  <label for="question">Do you eat dog food? *</label>
  <p>
    <input type="radio" name="question2" value="yes" required /> Yes
    <input type="radio" name="question2" value="no" /> No
  </p>

  <label for="why">If no, why?</label>
  <input type="text" class="form-control" name="why" data-parsley-conditionalrequired='["[name=\"question2\"]:checked", "no"]' data-parsley-validate-if-empty data-parsley-success-class="" data-parsley-conditionalrequired-message="This value is required since you do not eat dog food!" />

  <input type="submit" class="btn btn-default pull-right" />
</form>

<script type="text/javascript">
  window.ParsleyConfig = {
    validators: {
      conditionalrequired: {
        fn: function (value, requirements) {
          // if requirements[0] value does not meet requirements[1] expectation, field is required
          if (requirements[1] == $(requirements[0]).val() && '' == value)
          return false;

          return true;
        },
        priority: 32
      }
    }
  };
</script>
<script type="text/javascript" src="http://parsleyjs.org/dist/parsley.js"></script>

But any custom vaidators does not seems to work.

I mean, the logic of the custom validator si not respected. "If yes, in which language(s)?" I select Yes, and don't fill the language...

Where is the problem?

A fiddle is available also HERE

Upvotes: 2

Views: 469

Answers (1)

adamdc78
adamdc78

Reputation: 1161

Change

'["[name=\"question1\"]:checked", "yes"]'

in

<input type="text" class="form-control" name="languages" data-parsley-conditionalrequired='["[name=\"question1\"]:checked", "yes"]' data-parsley-validate-if-empty data-parsley-success-class="" data-parsley-conditionalrequired-message="This value is required since you are a programmer!" />

to

'["[name=\"question1\"]:checked", "true"]'

You've got to use the value rather than the text in

<input type="radio" name="question1" value="true" required /> Yes

EDIT

Per comments, an alternative (and more consistent) solution is to change the HTML input values:

<input type="radio" name="question1" value="yes" required /> Yes
<input type="radio" name="question1" value="no" /> No

Upvotes: 3

Related Questions