How to use different text for label in error message (with classLabel)?

[missmatsuko]

I have a checkbox with a very long label containing some consent messaging. I'd like the error to just say "Consent is required" rather than the whole label text.

It looks like using this class on a span within the label should do just that, but I don't see any change in the error message.

// label to pick textContent from to insert field name into error message
    classLabel: 'form-control-label',

Am I understanding the use of classLabel correctly?

[Mevrael]

Hi @missmatsuko

I hope you are well.

Thank you for your feedback.

Looks like classLabel is not used at all because I never had a use case where you would need to create a div as a label. The whole purpose of <label> is to be able to click on it and focus input itself which is especially essential for checkboxes, and if you don't have label at all, you just use aria-label on input itself. I also never seen long labels and probably wouldn't recommend them from UX perspective. I usually add a <small>Short help text</small> under input whenever I want to show a user more tips about specific input.

You can see a logic of how input title is chosen for error message here https://github.com/Mevrael/bunny/blob/master/src/Validation.js#L804

I am not aware of a web standard for this case, so it's up to developers to decide logic of this function.

I am open for any recommendations on improving this flow, and especially PRs. At the end you might also just extend this method and do own logic. You might create own Validation file, import bunnyjs, extend anything you need and import your own Validation file everywhere instead of 3rd party code.

Cheers

[missmatsuko]

Where is 'classLabel' used then? The description made it sound like it would work for my case.

I'm not sure the best practice for it. I do want clicking the consent message to check the checkbox, but I don't want the error message to be that long.

For example my checkbox is kind of like this:

• I consent to receiving periodic emails from this company and agree to the terms of service.

But I don't want the error message to be:
"I consent to receiving periodic emails from this company and agree to the terms of service. is required"

I'd prefer if the message said something like "consent is required" or "this field is required" because the error is just so long.

[Mevrael]

I understand that, however, there is no web standard for this case. classLabel is not used at all anymore. How do you see this could work?

[missmatsuko]

Well maybe just remove it from the docs if it's not being used at all? Or clarify what it does if it is being used in another way? I thought it would be a way to specify the label used in the error message in special cases. The JavaScript could check for an element within label with the class in classLabel and use that if it exists before going on to check for other values for the error message label.

…

On Tue, Sep 4, 2018, 9:58 PM Mev-Rael, ***@***.***> wrote: I understand that, however, there is no web standard for this case. classLabel is not used at all anymore. How do you see this could work? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#28 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARDkJmX3z3q9UqCgzHtnMllYDxBjBb10ks5uX1oKgaJpZM4WOkYv> .