Don't show errors on mount

[pavelivanov]

Hi! Is there a way to not show errors at the first render of a component?

render() {
    const nameLink = Link.state(this, 'name')

    nameLink.check(v => v, 'Name is required')

    return (
        <form>
            <Input valueLink={nameLink} />
            // Here will be Error shown when component will mounted
        </form>
    )
}

[gaperton]

Whenever input value is an empty string, and validation fails, it will add 'required' class to the input control. Thus, you will have an opportunity to mark it differently. With yellow, for example.

Or, don't draw the red border at all, just put an error message aside. In general, there is no point in not telling the user from the beginning which fields are required. That's the legacy of ancient HTML forms, where you just didn't have another opportunity cause server did the validation.

[gaperton]

You could try to simulate this behavior with an additional component member which will turn off validation on first render (set it to true in componentDidMount). If this is the thing you really want to do. I wouldn't bother. Forms telling you which fields are required are great.

[sealightPT]

In many UI frameworks there's already a symbol (like a *) to represent the required fields (e.g. Office UI Fabric). Displaying an error message before the user leaving the field is too "drastic" and not elegant. What would be the best way to achieve this?