Skip to content

Not playing nice with server-generated error labels #430

@WickyNilliams

Description

@WickyNilliams

Imagine the following scenario:

  • My web app is validating both server-side and client-side (as one would expect!)
  • Both the server and client generate the same markup for an error, for example's sake let's say a <label>
  • The user submits the form, the data validates client-side, and gets submitted to server
  • For whatever reason the server-side validation fails, an error label is generated and the user is returned to the page to correct the error
  • The user then begins to update the invalid fields...

I would expect at this point that the validation plugin will update any pre-existing (i.e. server-generated) error labels as the user types, however this is not the case - the label will only be updated if the server ouputs a label with the attribute generated="true".

The following line is responsible for making this decision whether the label is a suitable target to be updated:

// check if we have a generated label, replace the message then
if ( label.attr("generated") ) {
    label.html(message);
}

The simple solution is to output this attribute server-side, but that means generating invalid HTML. However, I think it would be good to offer this as an extensibility point so that the situation i have outlined can be dealt with simply, avoiding invalid markup. Alternatively you could make this check a little bit more intelligent:

// check if we have a generated label (or assume a label with the error class is a satisfactory target), replace the message then
if ( label.attr("generated") || label.hasClass(this.settings.errorClass) ) {
    label.html(message);
}

It is fair to assume this will only ever update the correct label as it is highly unlikely that another label will exist for the current element which has already been decorated with the errorClass.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions