-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Comments
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
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 isnull
, but not for select dropdowns with a placeholder option. It appears this is because when an option value is bound tonull
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 isrequired
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
The text was updated successfully, but these errors were encountered: