chainlist / svelte-forms

Svelte forms validation made easy
MIT License
403 stars 34 forks source link

[BUG] $myForm.hasError('email.email') not functional #105

Open kirkbushell opened 1 year ago

kirkbushell commented 1 year ago

Describe the bug When an email input has the email validator registered, checking for email.email error fails. The form knows its invalid, but the email validator check does not return true that it is the validation that has failed.

To Reproduce Steps to reproduce the behavior:

  1. Setup a new field, with an email validator.
  2. Enter an invalid email, such as heythere!
  3. Note that $form.valid is false, but $form.hasError('email.email') is also false (when it should be true)

Expected behavior $form.hasError('email.email') should return true.

Additional context Code being used:

<input type="text" bind:value={$eml.value} class="w-full p-2 px-4 rounded focus:outline-blue-500" placeholder="Email">
{#if !$emailForm.valid}
    <div class="bg-red-500 text-white rounded-b -mt-0.5 p-0.5 pt-1 text-sm">
        {#if $emailForm.hasError('email.required')}
            <span>Email is required.</span>
        {/if}
        {#if $emailForm.hasError('email.email')}
            lkjasdflkjasf
            <span>Please provide a valid email address.</span>
        {/if}
    </div>
{/if}

<script type="ts">
    import { form, field } from 'svelte-forms';
    import { email, required } from 'svelte-forms/validators';

    const eml = field('email', '', [required(), email()])
    const emailForm = form(eml)
</script>

The div that highlights it all in red, is showing, but it's not showing the invalid error for the email validation.

kirkbushell commented 1 year ago

Alright, I figured it out - documentation needs an update. Unfortunately, you need to know the internal error string that is raised when it errors - which is.. "not_an_email"

I would have expected it to just be "email". like "required" (same function name).