Fix element check in custom-validity plugin (#544)

* Fix hello world source

* Fix element check in `custom-validity` plugin

* Add HTMLSelectElement

* Update release note

CHANGELOG.md

@@ -6,7 +6,7 @@
 
 - Changed the `data-on-interval` attribute to accept a `__duration` modifier instead of a `__delay` modifier ([#513](https://github.com/starfederation/datastar/issues/513)).
 - Changed the parsing of Datastar expressions so that only semicolons can be used to explicitly indicate a statement delimiter ([#525](https://github.com/starfederation/datastar/issues/525)).
-- The `data-custom-validity` attribute can now be used on all valid elements, not just input elements ([534](https://github.com/starfederation/datastar/pull/534)).
+- The `data-custom-validity` attribute can now be used on select and textarea elements, in addition to input elements ([534](https://github.com/starfederation/datastar/pull/534)).
 
 ### Fixed
 

library/src/plugins/official/browser/attributes/customValidity.ts

@@ -17,7 +17,7 @@ export const CustomValidity: AttributePlugin = {
   valReq: Requirement.Must,
   onLoad: (ctx) => {
     const { el, genRX, effect } = ctx
-    if (!(el instanceof HTMLObjectElement)) {
+    if (!(el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement)) {
       throw runtimeErr('CustomValidityInvalidElement', ctx)
     }
     const rx = genRX()

site/routes_errors_runtime.templ

@@ -59,7 +59,7 @@ templ ComputedValueRequired(name string, info *RuntimeErrorInfo) {
 
 templ CustomValidityInvalidElement(name string, info *RuntimeErrorInfo) {
 	@RuntimeErrorView(name, info) {
-		<p>The <code>data-custom-validity</code> attribute was used on an element that is not a <code>HTMLInputElement</code>. The <code>data-custom-validity</code> attribute can only be used on form elements.</p>
+		<p>The <code>data-custom-validity</code> attribute was used on an element that is not a <code>HTMLInputElement</code>, <code>HTMLSelectElement</code> or <code>HTMLTextAreaElement</code>. The <code>data-custom-validity</code> attribute can only be used on input, select and textarea elements.</p>
 		@customValidityError()
 	}
 }

site/static/md/examples/custom_validity.md

@@ -2,10 +2,9 @@
 
 ## Demo
 
-<form data-on-submit="@get('/examples/custom_validity/data', {contentType: 'form'})" class="space-y-8">
+<form data-signals-bar="" data-on-submit="@get('/examples/custom_validity/data', {contentType: 'form'})" class="space-y-8">
   <label class="flex items-center gap-2 input input-bordered">
-    <input data-bind-foo data-custom-validity="$foo === $bar ? '' : 'Field values must be the same.'" name="foo"
-      class="grow" placeholder="Type foo contents" />
+    <input data-bind-foo data-custom-validity="$foo === $bar ? '' : 'Field values must be the same.'" name="foo" class="grow" placeholder="Type foo contents" required />
   </label>
   <label class="flex items-center gap-2 input input-bordered">
     <input data-bind-bar name="bar" class="grow" placeholder="Type bar contents" />
@@ -19,13 +18,13 @@
 
 ## Explanation
 
-The expression passed into the `data-custom-validity` attribute is evaluated and the result is used as the custom
-validity message for the input. If the result is an empty string, the input is considered valid. If the result is a
-non-empty string, the input is considered invalid and the string is used as the custom validity message.
+The expression passed into the `data-custom-validity` attribute is evaluated and the result is used as the custom validity message for the input. If the result is an empty string, the input is considered valid. If the result is a non-empty string, the input is considered invalid and the string is used as the custom validity message.
+
+Note that the signal `bar` must be defined _before_ it is referenced in the `data-custom-validity` attribute expression.
 
 ```html
-<form data-on-submit="@get('/endpoint', {contentType: 'form'})">
-  <input data-bind-foo data-custom-validity="$foo === $bar ? '' : 'Field values must be the same.'" name="foo" />
+<form data-signals-bar="" data-on-submit="@get('/endpoint', {contentType: 'form'})">
+  <input data-bind-foo data-custom-validity="$foo === $bar ? '' : 'Field values must be the same.'" name="foo" required />
   <input data-bind-bar name="bar" />
   <button>
     Submit form