Jquery-validation: Strange behavior on required fields

Created on 14 Mar 2017  路  3Comments  路  Source: jquery-validation/jquery-validation

Subject of the issue

Required (error) message not always showing when:

  1. A required field is already filled in
  2. Make it empty
  3. Tab to next field -> no error message
  4. Tab to previous -> no error message
  5. Fill in something, and empty the field -> now the required message popups

Your environment

  • version of jquery-validate: 1.16.0
  • which browser and its version: Firefox 52

Steps to reproduce

http://jsfiddle.net/f2obn9e1/

Expected behaviour

Error message should this display on first 'empty'

Actual behaviour

(Error) message visible on second attempt

stale

Most helpful comment

I think this issue stems from the onfocusout event handler:

onfocusout: function( element ) {
if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
this.element( element );
}
},

The call to this.optional( element ) returns either true or 'dependency-mismatch' , so !this.optional( element ) always evaluates to false, which I'm assuming is a bug. The element() check gets skipped tabbing through the form until the element makes it into this.submitted .

I changed the if condition to:

if ( !this.checkable( element ) && ( element.name in this.submitted || this.optional( element )==='dependency-mismatch') ) {

which triggers the element() check as expected for required fields.

Its not clear to me though what 'dependency-mismatch' means so I'm not sure if this the correct (or only) change needed to solve this problem.

All 3 comments

I think this issue stems from the onfocusout event handler:

onfocusout: function( element ) {
if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
this.element( element );
}
},

The call to this.optional( element ) returns either true or 'dependency-mismatch' , so !this.optional( element ) always evaluates to false, which I'm assuming is a bug. The element() check gets skipped tabbing through the form until the element makes it into this.submitted .

I changed the if condition to:

if ( !this.checkable( element ) && ( element.name in this.submitted || this.optional( element )==='dependency-mismatch') ) {

which triggers the element() check as expected for required fields.

Its not clear to me though what 'dependency-mismatch' means so I'm not sure if this the correct (or only) change needed to solve this problem.

Behavior still present in 1.17.0

My required fields are not triggering error state when cleared of their initial value.

edit: After trying a few things, it appears to only be the first validation, once a validation has been triggered other fields DO respond after removing their initial value.

edit2: Fixed for me by adding an $("#inputfield_id").valid(); for a random input, after my $("#form_id").validate();

This issue/proposal has been automatically marked as idle and stale because it hasn't had any recent activity. It will be automtically closed if no further activity occurs. If you think this is wrong, or the problem still persists, just pop a reply in the comments and one of the maintainers will (try!) to follow up.
Thank you for contributing :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lucasgonze picture lucasgonze  路  7Comments

BenjaminHoegh picture BenjaminHoegh  路  7Comments

rattana picture rattana  路  9Comments

mapeveri picture mapeveri  路  4Comments

nathanl picture nathanl  路  6Comments