Skip to content

Select option with null value prevents native required field validation #8312

@theodorejb

Description

@theodorejb

Describe the problem

I'm building a form which is supposed to use native browser validation for the required inputs. This works correctly for text inputs when the bound value is null, but not for select dropdowns with a placeholder option. It appears this is because when an option value is bound to null Svelte sets the value attribute to the string "null" rather than an empty string.

See https://svelte.dev/repl/69cfd53cafa6419e9842a3dbb6a8f5b4?version=3.55.1 for an example.

Describe the proposed solution

When an option element value is bound to null Svelte should set the value attribute to an empty string. That way if the select element is required the browser can natively validate that a non-null option is selected.

Alternatives considered

It is possible to work around the current behavior by binding the placeholder option to an empty string rather than null. However, this causes problems when (for example) the bound value is sent to an API which requires it to be a nullable number or object rather than a string.

This requires additional messy code to work around (e.g. changing the client side TypeScript interface to allow empty strings in addition to the type required by the API, and then manually replacing an empty string with null just before sending the request body to the API).

Importance

would make my life easier

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