CODEWITHSUNDEEP
jqueryvalidationsemantic-ui
Vapire
Vapire

Reputation: 4588

Semantic UI Form Validation "depends" option not working

As of version 2.2 form validations support a depending field. However when I try to implement it in my project, it seems that the depends option is completely ignored:

// HTML
<form class="ui form segment">
  <input type="checkbox" name="is_volunteer" id="is_volunteer" />
  <input type="text" name="volunteer_name" id="volunteer_name" />
</form>

// JS
$('form').form({
  inline: true,
  fields: {
    name: {
      identifier: 'volunteer_name',
      depends: 'is_volunteer',
      rules: [{ type: 'empty' }]
    }
  }
})

It's basically the same structure as the shown demo. However, with this the name text field always gets validated, no matter if the checkbox is checked or not.

Of course, I tried it also with proper semantic markup, but it's the same result.

I also checked if I'm really using version 2.2, and I am... I also get no debug error or anything else.

Upvotes: 1

Views: 1215

Answers (2)

Andrei123
Andrei123

Reputation: 15

Try to include prompt parameter.

The rules will become:

rules: [{
   type: 'empty',
   prompt: 'Your validation message'
}]

Upvotes: 1

adriennetacke
adriennetacke

Reputation: 1746

I believe the demo version is working.

As their docs state:

Form field validation can now specify a depends property which will only cause validation to occur only when another field, like a checkbox or input, is selected.

So, if the checkbox is checked, validation will occur on the text box and will show an error if empty (which is the rule implemented).

If the checkbox is not checked, validation will not occur on the text box which means no errors will show, even if the text box is blank.

This functionality is working as described in the demo, so I think your code should be working as well. Please correct me if there is something I may have misunderstood!

Upvotes: 0

Related Questions