Vee-validate: Radio inputs validation error

Created on 3 Jul 2017  路  9Comments  路  Source: logaretm/vee-validate

Versions:

  • VueJs: 2.3.4
  • Vee-Validate: 2.0.0-rc.6

Description:

(Chrome 59.0.3071.115 )

If none of the radio input is checked, validateAll is throwing an error.
vee-validate.js:1960 Uncaught TypeError: Cannot read property 'disabled' of null

The same issue is on the demo page: http://vee-validate.logaretm.com/examples.html#radio-buttons-example after clicking apply button.

馃悰 bug

Most helpful comment

@preeteshjain RC.7 is released

All 9 comments

in
_resolveValueGetter:
document.querySelector(("input[name=\"" + (this$1.el.name) + "\"]:checked"))returns null for a readiobutton that is not checked. And no null check is done after getting the context in _resolveValuesFromGetters

...
...
    if (getter && context && (scope === '__global__' || fieldScope === scope)) {
      var ctx = context();  /*CONTEXT RETURNED NULL HERE*/
      if (ctx.disabled) {
        return;
      }

...
...

this was fixed in a this commit 94d66ab833075a7234b787644738b58001e3c372

I don't agree with closing this bug.
The validation still doesn't work, even with the commit 94d66ab.
Now, whenever I load the form it causes an error in the makeDirective function, before even validating it.
Normally a Radiobutton (list) has the same name attribute to be able to group them. The _moveFieldScope moves the first Radiobutton from scobe __ __global__ __ to scope __null__ (whatever that means), but the the next Radiobuttons with the same name can't be found in the __ __global__ __ scope anymore, making
context.$validator._resolveField(instance.fieldName, instance.scope); return undefined, and therefor causing a Javascript error on _moveFieldScope
I could rename them (like add to the name the index of the v-for loop I use to create the radio buttons), but then they will not be considered as grouped in HTML.
... And then, what should the name for the errors.has('xxxx') parameter be?

An update of the documentation with a working sample, would be great.

Thanks for your work anyways!

@pimboden I thought I had fixed null scopes from occurring, right now I cannot reproduce it with the latest commits on master and using the docs as a snippet, if you have an example that produces it reliably then it would be amazing if you share it with me so we can close this for sure.

this commit changes https://github.com/baianat/vee-validate/commit/94d66ab833075a7234b787644738b58001e3c372
made only in the src/files.. I think it must be made also in the dist/files

@EssamWD sure, should be coming up shortly.

@logaretm Any updates on this? I had to revert back to RC5 to make it work. It's unusable in production right now (through npm).

@preeteshjain I'm writing the release notes currently, so in an hour or two.

@preeteshjain RC.7 is released

Was this page helpful?
0 / 5 - 0 ratings

Related issues

YamenSharaf picture YamenSharaf  路  3Comments

the94air picture the94air  路  3Comments

parweb picture parweb  路  3Comments

7immer picture 7immer  路  3Comments

biapar picture biapar  路  3Comments