Form validation in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value to the variable.

Svelte

<input type="text" bind:value=[1] />

Drag options to blanks, or click blank then click option'

Apassword

Busername

Cemail

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that is not declared.

Forgetting to use bind:value.

Binding the input's value to username allows Svelte to track the input's content.

2fill in blank

medium

Complete the code to check if the password length is at least 8 characters.

Svelte

{#if [1].length >= 8}
  <p>Password is strong enough.</p>
{/if}

Drag options to blanks, or click blank then click option'

Ausername

Bage

Cemail

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Checking the wrong variable.

Using length without accessing the variable.

We check the length of the password variable to validate its strength.

3fill in blank

hard

Fix the error in the form submission handler to prevent default behavior.

Svelte

<form on:submit=[1]>
  <!-- form fields -->
</form>

Drag options to blanks, or click blank then click option'

AhandleSubmit

BhandleSubmit(event)

ChandleSubmit.prevent

DhandleSubmit|preventDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the handler with parentheses in the template.

Not preventing the default form submission.

Using on:submit|preventDefault stops the form from reloading the page on submit.

4fill in blank

hard

Fill both blanks to create a reactive statement that updates isValid when email changes.

Svelte

<script>
  let email = '';
  let isValid = false;

  $: isValid = [1].includes('@') && [2].includes('.');
</script>

Drag options to blanks, or click blank then click option'

Aemail

Busername

Cpassword

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variables in the reactive statement.

Not using the reactive statement syntax.

The reactive statement updates isValid based on the email variable's content.

5fill in blank

hard

Fill all three blanks to create a form with validation that disables the submit button if the form is invalid.

Svelte

<script>
  let email = '';
  let password = '';
  $: isFormValid = [1].includes('@') && [2].length >= 8;
</script>

<form>
  <input type="email" bind:value=[3] aria-label="Email address" required />
  <input type="password" bind:value={password} aria-label="Password" required />
  <button type="submit" disabled={!isFormValid}>Submit</button>
</form>

Drag options to blanks, or click blank then click option'

Aemail

Bpassword

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variables in validation.

Not binding the input values correctly.

The form checks if email contains '@' and password is at least 8 characters. The submit button disables if invalid.