@samline/forms 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,7 +37,7 @@ bun add @samline/forms
|
|
|
37
37
|
Use the browser build when you do not have a bundler and need to run the package directly in HTML.
|
|
38
38
|
|
|
39
39
|
```html
|
|
40
|
-
<script src="https://unpkg.com/@samline/forms@1.0.
|
|
40
|
+
<script src="https://unpkg.com/@samline/forms@1.0.2/dist/browser/global.global.js"></script>
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
Pin the version in production.
|
|
@@ -49,7 +49,7 @@ The browser build exposes `window.forms`.
|
|
|
49
49
|
<input name="email" type="email" />
|
|
50
50
|
</form>
|
|
51
51
|
|
|
52
|
-
<script src="https://unpkg.com/@samline/forms@1.0.
|
|
52
|
+
<script src="https://unpkg.com/@samline/forms@1.0.2/dist/browser/global.global.js"></script>
|
|
53
53
|
<script>
|
|
54
54
|
const contactForm = window.forms.form('contact-form')
|
|
55
55
|
contactForm.validate()
|
|
@@ -121,6 +121,13 @@ Creates a controller from:
|
|
|
121
121
|
- `autoSubmit(options?)`
|
|
122
122
|
- `disableAutoSubmit()`
|
|
123
123
|
|
|
124
|
+
`onSubmit` accepts an optional second argument named `preventDefault`.
|
|
125
|
+
|
|
126
|
+
- `onSubmit(callback)` is equivalent to `onSubmit(callback, true)`
|
|
127
|
+
- with `true`, valid submissions are intercepted, which is the right choice for `fetch` or AJAX flows
|
|
128
|
+
- with `false`, valid submissions continue with the browser's native form submit behavior
|
|
129
|
+
- invalid submissions are still prevented, even when you pass `false`
|
|
130
|
+
|
|
124
131
|
### Field observation
|
|
125
132
|
|
|
126
133
|
- `watch(field, callback)`
|
|
@@ -219,6 +226,22 @@ profileForm.onSubmit(async (_element, _data, formData) => {
|
|
|
219
226
|
})
|
|
220
227
|
```
|
|
221
228
|
|
|
229
|
+
This uses the default `preventDefault = true`, so the package intercepts the valid submit and lets you handle the request yourself.
|
|
230
|
+
|
|
231
|
+
### Submit with native form behavior
|
|
232
|
+
|
|
233
|
+
```ts
|
|
234
|
+
const profileForm = form('profile-form')
|
|
235
|
+
|
|
236
|
+
profileForm.onSubmit(() => {
|
|
237
|
+
console.log('validation passed')
|
|
238
|
+
}, false)
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
Use `false` when the form should continue with its normal HTML submission after validation succeeds, for example in server-rendered applications such as Laravel with Blade.
|
|
242
|
+
|
|
243
|
+
If validation fails, the package still prevents the submit.
|
|
244
|
+
|
|
222
245
|
### Prefill from the URL
|
|
223
246
|
|
|
224
247
|
```ts
|