svelte-forms

svelte-forms copied to clipboard

I have a simple sveltekit with tailwind page and I'm trying to do a simple signUp form with all the form fields required() . The thing is that the valid value of the form starts as true when all the values of the fields are empty and whenever a field is valid and the others are empty the value of form.valid is true.

<script lang="ts">
  import { form, field, style } from 'svelte-forms';
  import { required, email, matchField } from 'svelte-forms/validators';
  
  const userEmail = field('email', '', [required(), email()]);
  const password = field('password', '', [required()]);
  const confirmPassword = field('passwordConfirm', '', [required(), matchField(password)]);
  
  const signUpForm = form(userEmail, password, confirmPassword);
</script>

<label for="email" class="label">Email</label>
<input
  type="text"
  placeholder="Type your email"
  name="email"
  bind:value={$userEmail.value}
/>

<label for="password" class="password">Password</label>
<input
  type="password"
  placeholder="Type your password"
  name="password"
  bind:value={$password.value}
/>

<label for="confirmPassword" class="confirmPassword">Confirm password</label>
<input
  type="confirmPassword"
  placeholder="Confirm your password"
  name="confirmPassword"
  bind:value={$confirmPassword.value}
/>

I expected the inital value of the form.valid to be false on initialization and whenever for it to depend on the validity of the fields even when they are not dirty

In both cases the $form.valid should be false right?

Same here. Fyi once dirty the validation seems to kick in correctly, but initially I also got valid: true whatsoever.

Same here. Fyi once dirty the validation seems to kick in correctly, but initially I also got valid: true whatsoever.

I don't know if you fully tested the library but in my case whenever a field is fully valid the entire form has valid as true, as I showed in the las image

Hi,

I'm looking for a fix! Thanks for the report

FYIL @luist1228,

The form being valid at first render is an expected behavior. As stated in the documentation on the field section:

When I change those options, it's seems to work as you would expect.

Close issue due inactivity