svelte-forms

svelte-forms copied to clipboard

How does validation work with checkbox inputs?

Perhaps a new label is needed for docs issues? It's more bug than feature request, but it's not very informative.

Hi @eden-omb ,

What do you mean?

I had no trouble validating checkboxes following the svelte-documentation and svelte-forms field value.

<script>
import { field } from 'svelte-forms';

const box = field('booleanValue', false);
</script>

<input type"checkbox" bind:checked={$box.value}

That's just for one checkbox. Svelte docs give us (bind:group)[https://svelte.dev/docs#template-syntax-element-directives-bind-group] to collect values like that into an array. Radio buttons also use bind:group but uses it to set one value like a normal input. Since multiple checkboxes requires an array value and therefore validating an array value, this needs documentation. How can I, for example, validate every selected value, or selecting a minimum amount of values, or something like all selected options having at least some sum? This would also be relevant for <select multiple>.

bind:group is working fine with svelte-forms. Here is a working example:

<script>
  import { form as formValidation, field } from 'svelte-forms'

  const delivery_option = field('delivery_option', '', [])
  const formValidator = formValidation(delivery_option)
</script>

<form>
  <div>
    <input bind:group={$delivery_option.value} type="radio" name="delivery_option" value="Pick up">
    <label>Pick up</label>
  </div>
  
  <div>
    <input bind:group={$delivery_option.value} type="radio" name="delivery_option" value="USPS">
    <label>USPS</label>
  </div>
</form>

<div>Selected delivery method: {$delivery_option.value}</div>

I plan on contributing with the documentation, probably during weekend.