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

Form novalidate attribute doesn't render when conditional (given a value) #15082

Closed
Rican7 opened this issue Jan 22, 2025 · 5 comments · Fixed by #15083
Closed

Form novalidate attribute doesn't render when conditional (given a value) #15082

Rican7 opened this issue Jan 22, 2025 · 5 comments · Fixed by #15083

Comments

@Rican7
Copy link
Contributor

Rican7 commented Jan 22, 2025

Describe the bug

Adding a novalidate attribute to a <form> element is not rendering that attribute, unless it's not conditional (no value is given).

For example, this works: <form novalidate></form>
... but this does not work: <form novalidate={true}></form>

Reproduction

Here's a minimal reproduction using the latest release of Svelte (v5.19.1):

https://svelte.dev/playground/585b8c82301d4c65bc83eeaeda119d68?version=5.19.1

Logs

System Info

System:
    OS: Linux 4.4 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 13.48 GB / 31.74 GB
    Container: Yes
    Shell: 5.1.16 - /usr/bin/bash
  npmPackages:
    svelte: ^5.19.0 => 5.19.0

Severity

blocking an upgrade

@Rican7
Copy link
Contributor Author

Rican7 commented Jan 22, 2025

I think I see the issue!

Image

The JS output is showing that the attribute is being set on the JS DOM object as novalidate, which is the name of the HTML attribute, but it's not the name of the DOM property. The DOM property is noValidate.

The casing there is important.

@Rican7
Copy link
Contributor Author

Rican7 commented Jan 22, 2025

I'm not an expert on this repo, but I think this could be fixed via adding a novalidate: 'noValidate' mapping here:

/**
* @type {Record<string, string>}
* List of attribute names that should be aliased to their property names
* because they behave differently between setting them as an attribute and
* setting them as a property.
*/
const ATTRIBUTE_ALIASES = {
// no `class: 'className'` because we handle that separately
formnovalidate: 'formNoValidate',
ismap: 'isMap',
nomodule: 'noModule',
playsinline: 'playsInline',
readonly: 'readOnly',
defaultvalue: 'defaultValue',
defaultchecked: 'defaultChecked',
srcobject: 'srcObject'
};

🤔

@elliott-with-the-longest-name-on-github
Copy link
Contributor

Want to become a contributor? Open a PR and add a test 😉 If you don't get to it, I'll take a stab at it tomorrow.

@Rican7
Copy link
Contributor Author

Rican7 commented Jan 22, 2025

On it!

@Rican7
Copy link
Contributor Author

Rican7 commented Jan 22, 2025

PR up: #15083

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.

2 participants