Skip to content
This repository was archived by the owner on Nov 24, 2025. It is now read-only.
This repository was archived by the owner on Nov 24, 2025. It is now read-only.

* decorator on required input fields should be presentation, not content #3381

@ocket8888

Description

@ocket8888

In Traffic Portal, any time a field is required its label will have a * appended to it. It looks somewhat like this:

<div>
    <label>foo *</label>
    <div>
        <input name="foo" required/>
        <small ng-show="hasError(thisForm.foo, 'required')" style="color: red;">Required</small>
    </div>
</div>

IMO, that * could just be removed entirely, because the required attribute and the special error message both already accomplish the same thing.

However, it seems that people are in general fond of the *, so if we're not going to remove it, it should be made a part of the presentation and not the content. See, that <label> as-is says that the <input> is for something called foo *. That's not the case; it's for something called foo that happens to be required. Instead, styling should be used to provide decorations like that.

<style type="text/css">
    label > input:required::before, label > select:required::before, label > textarea:required::before {
        content: " *";
        color: inherit;
    }
</style>
...
<div>
    <label>foo <input name="foo" required/></label>
    <small ng-show="hasError(thisForm.foo, 'required')" style="color: red;">Required</small>
</div>

(Note that this has the added bonus of fixing the vast majority of our <label>s not actually containing the thing they label or having a for attribute that would otherwise indicate what they label)

Now the <label> says that the <input> is for a thing called foo, but the * still appears.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Traffic Portal v1related to Traffic Portal version 1improvementThe functionality exists but it could be improved in some way.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions