Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
theodorejb opened this issue Feb 23, 2023 · 0 comments · Fixed by #8328
Closed

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

theodorejb opened this issue Feb 23, 2023 · 0 comments · Fixed by #8328

Comments

@theodorejb
Copy link
Contributor

theodorejb commented Feb 23, 2023

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

theodorejb added a commit to theodorejb/svelte that referenced this issue Feb 26, 2023
Null and undefined `value` bindings should always be set to an empty string. This allows native browser validation of `required` fields to work as expected with placeholder options.

Resolves sveltejs#8312
theodorejb added a commit to theodorejb/svelte that referenced this issue Feb 26, 2023
Null and undefined `value` bindings should always be set to an empty string. This allows native browser validation of `required` fields to work as expected with placeholder options.

Resolves sveltejs#8312
theodorejb added a commit to theodorejb/svelte that referenced this issue Feb 28, 2023
Null and undefined `value` bindings should always be set to an empty string. This allows native browser validation of `required` fields to work as expected with placeholder options.

Placeholder options bound to null are necessary in forms where the field is conditionally required, and the bound value is posted to an API endpoint which requires it to be a nullable number or object rather than a string.

Resolves sveltejs#8312
theodorejb added a commit to theodorejb/svelte that referenced this issue Mar 1, 2023
Null and undefined `value` bindings should always be set to an empty string. This allows native browser validation of `required` fields to work as expected with placeholder options.

Placeholder options bound to null are necessary in forms where the field is conditionally required, and the bound value is posted to an API endpoint which requires it to be a nullable number or object rather than a string.

Resolves sveltejs#8312
dummdidumm pushed a commit that referenced this issue Apr 14, 2023
Null and undefined `value` bindings should always be set to an empty string. This allows native browser validation of `required` fields to work as expected with placeholder options.

Placeholder options bound to null are necessary in forms where the field is conditionally required, and the bound value is posted to an API endpoint which requires it to be a nullable number or object rather than a string.

fixes #8312
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant