Novalidate can't be overridden (SolidJS)

[susickypavel]

Form component sets novalidate="true" by default and can't be overridden. I want to create progressively enhanced forms with native HTML validation, but it can't be done this way.

[fabian-hiller]

Modular Forms currently only support progressively enhanced forms in Qwik. For SolidJS we are waiting for changes in SolidStart so that we can implement it with a good DX.

What advantage do you have with Modulars Forms if you use HTML validation? If it makes sense, I can modify the Form component to allow the attribute to be overridden.

[susickypavel]

I've been using Modular forms with Astro (for quite some time and didn't see many issues, btw).

If I can override the novalidate attribute, I can set it to false by default then the form will be validated by native HTML validation, so I can give user at least some minimal validation without js because the form will be SSR-ed.

If the user has scripting available/enabled, I can set the novalidate to true on mount and use modular forms as usual.

[fabian-hiller]

I understand. That makes sense. I will try to improve that tomorrow.

[fabian-hiller]

Apart from that, do you have any other ideas for improving the API? Will be working on Modular Forms next week to get to v1 in the next few months.

[susickypavel]

Apart from that, do you have any other ideas for improving the API? Will be working on Modular Forms next week to get to v1 in the next few months.

I think the API is very well written. it's intuitive and robust. I had only a few issues that you quickly fixed or helped me with.

One thing that I quite often came across was "duplicating" of validation and validation attributes. Let's see example below.

<Field
	name="Name"
	validate={[
		required("Please enter your name"),
		minLength(2, "Name should be at least 2 characters long"),
		maxLength(50, "Name should be at most 50 characters long"),
	]}
	>
	{(field, props) => (
		<input
			{...props} 
			required
			minLength={2}
			maxLength={50}
		/>
	)}
</Field>

It might be useful to automatically populate props with minLength, maxLength and required attributes if matching counterpart in validate prop are passed. However, it might be up to discussion because even with novalidate="true" the maxLength constraints the maximum number of characters input can have so it might break some very exotic usage of inputs. On the other hand, the developer can split the props and don't pass it to the input if it breaks their usage.

There would be two benefits:

1. You don't "duplicate" the validation logic.
2. It improves the accessibility of most forms without the need for some developer intervention.

---

Another thing that caught my eye is that the Form component is rendered with of attribute with value [object Object] which doesn't seem correct or even useful, so maybe it's accidentally passed?

---

Lastly, it's very common to create ids for inputs and error elements to associate them with correct labels and error texts. It might be helpful to add some string identification of the form that can be used to distinguish the same inputs between different forms (on the same page) so you can reduce the chance of id collision.

[fabian-hiller]

Thanks a lot for your feedback! I fixed the noValidate problem. I'll look at the other things on Monday.

[susickypavel]

I tried the fix and realized I misunderstood how novalidate works. The novalidate is a boolean attribute. Based on the HTML spec, to represent a "true" value, the attribute must be present (as it is by default) and if the value should be false then the attribute must be omitted altogether.

The attribute is present by default, so we need to pass null to the form to remove it.

<Form onSubmit={onSubmit} noValidate={null}>
...
</Form>

However, TypeScript accepts boolean so it throws a type error.

Type null is not assignable to type boolean.

[fabian-hiller]

Won't the attribute be removed if you set the value to false?

[susickypavel]

Not quite, there are attributes that needs false to be on the element (aria-expanded for example). Probably it's SSR framework (Astro) specific bug. I'll try to investigate later. Most probably this won't need fixing on modular forms side so you don't have to worry about that.

[susickypavel]

Okay, I finally understand what's going on. A similar issue is with autoFocus in the field props.

There is a difference between novalidate and noValidate, autofocus and autoFocus.

novalidate, and autofocus (lowercase) are valid HTML attributes, but noValidate and autoFocus aren't. They are just "convenient" wrappers for developers that should map to native HTML attributes. However, for some reason, Solid (at least in conjunction with Astro) doesn't map it and renders it as is, hence in the HTML, is autoFocus="false" which translates for HTML as autofocus=""

Solution is to rename noValidate to novalidate and autoFocus to autofocus.

EDIT: Maybe the camelCase props aren't even valid at all in Solid playground it throws a type error.

[fabian-hiller]

Interesting. Thanks for your research. Maybe you should ask in SolidJS Discord or create an issue on GitHub. Feel free to link this issue.