Validating Checkboxes using Svelte

Question

I'm trying to validate a question with checkboxes using Svelte but I'm having trouble with allowing the user to be able to select multiple colors and saving what they selected in local storage.

This is the validation I would like to preform:

• If nothing is select p tag says "Please select color(s)"
• If multiple are selected (or just 1 selected), then I want to make a string containing all of the values that they selected. Then I want to save that string in localStorage. I want to have the string because I'm allowing the user to check more then 1 option if they want so I thought think saving each value separately would take too long since I have a lot of questions with checkboxes. This is why I'm trying to put the selected options in a string so I can save the selected color string as a value for the colors question.

Ex:

• Colors question localstorage.setItem("colors", *color string here*);
• If question was about toys then localstorage.setItem("toys", *toys string here*);

Here is my code:

All code is in App.svelte file

In script tags:

let blue = false;
let red = false;
let green = false;
let purple = false;

{#if blue== "" | red== "" | green == "" | purple == ""}
<p> please pick a color</p>
{:else}
string r = blue.checked + red.checked + green.checked + purple.checked;
document.localStoragesetItem("colors",r);
{/if}

HTML

<div id="container">
    <label>Select the colors you like:</label><br>
    <input type="checkbox" id="color" name="color" value="blue" bind:checked={blue}>
    <label>Blue</label><br>
    <input type="checkbox" id="color" name="color" value="red" bind:checked={red}>
    <label>Red</label><br>
    <input type="checkbox" id="color" name="color" value="green" bind:checked={green}>
    <label>Green</label><br>
    <input type="checkbox" id="color" name="color" value="purple" bind:checked={purple}>
    <label>Purple</label><br><br>
</div>

Answer 1

You can't use localstorage in a REPL so I've commented it out but, your solution would be:

<script>
    const colours = {
        blue: false,
        red: false,
        green: false,
        purple: false
    }

    $: {
        console.log({ colours })
        // localStorage.set({ colours })
    }
</script>

{#if !Object.keys(colours).filter(c => !!colours[c]).length}
<p>please pick a color</p>
{:else}
{JSON.stringify(colours)}
{/if}

<div id="container">
    <label>Select the colors you like:</label><br>
    <input type="checkbox" bind:checked={colours.blue}>
    <label>Blue</label><br>
    <input type="checkbox" bind:checked={colours.red}>
    <label>Red</label><br>
    <input type="checkbox" bind:checked={colours.green}>
    <label>Green</label><br>
    <input type="checkbox" bind:checked={colours.purple}>
    <label>Purple</label><br><br>
</div>

I've put it in the REPL so you can try here

You needed to:

• remove logic from your template code - all logic should be in your script code
• bind to a hash containing your colours, which can be stored in localstorage
• use triple equals not double equals (see strict equality)
• remove the value attribute from your checkboxes (bind:checked is how value is managed)
• don't duplicate the id attribute in HTML (you don't need it anyway)
• you don't need the name attribute
• there are also numerous problems with your html which are out of scope here (use of labels, use of br)