Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Unintuitive Field Error Message & Color

default discord avatar
taun21602 years ago
6

Hi. Is there a way to alert the user more specifically where the invalid field is located? The red * makes me assume that is what the error is alerting to, which is false, it's actually alerting of an invalid field in a different tab.



The vid shows the user experience



After I add a Content block, the Title is still highlighted as an invalid field, though the Product is successfully created after hitting publish. Why? I'm using the e-commerce template.



Rich text also has a red * next to it. Is this alerting me that it's just a required field, not an invalid field? If so, I'd like the colour to be white, and red only when it's invalid?



https://github.com/taunhealy/Melex_CMS

Unintuitive Field Error Message



Unintuitive Field Error Message & Color

  • discord user avatar
    jmikrut
    2 years ago

    hey

    @479030528084017165

    ok so a few things



    the red * just denotes that a field is required, not that it's invalid



    and we have an open roadmap item to surface invalid fields within tabs / collapsibles / etc. - - right now, it's hard to see invalid fields if they are not opened in an active tab or visible within a collapsible - but this is due to be improved very shortly



    last note - it doesn't appear to me that you did successfully publish in the video



    you clicked the button, which ran the validation and failed, therefore preventing the publish



    note that you CAN save drafts that do not pass validation, so you had a draft saved, which was not valid, but you can't publish

  • default discord avatar
    taun21602 years ago

    I see, thanks James. These changes will be good - the red typically represents invalid and if it's invalid it'll be great for the CMS to alert to exactly where. Just the asterix * is enough for required fields.



    "The color red is commonly used to indicate invalid input. People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used."

    https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
  • default discord avatar
    jankocian2 years ago
    @364124941832159242

    Is there a temporary workaround? I'm thinking a more explanatory validation message would be sufficient for now - just the first invalid's field path would be OK. I'm only getting "Please correct invalid fields" now. With a full page built as a flexible content using arrays and nested collapsibles, it is super unintuitive and I had to help my clients out with this particular issue a few times already...

  • discord user avatar
    jmikrut
    2 years ago

    a full fix and proper UX is going to be coming sooner than you might expect



    like, within the next few weeks

  • default discord avatar
    tinouti2 years ago
    @364124941832159242

    I assume you're referring to this roadmap item? 👀

    https://github.com/payloadcms/payload/discussions/881

    Very excited to hear that it's coming soon! 🥳

  • discord user avatar
    jmikrut
    2 years ago

    yes exactly



    Jarrod and I are working through that now

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.