hydrostack / hydro

Hydro brings stateful and reactive components to ASP.NET Core without writing JavaScript
https://usehydro.dev
MIT License
716 stars 17 forks source link

validation difficulty #55

Closed adamfoneil closed 2 months ago

adamfoneil commented 3 months ago

hello! I'm having trouble using form validation. When I submit a form with a require field missing, I get a validation error as expected.

image

Here's my form markup:

<form hydro-on:submit="@(() => Model.SubmitAsync())">       
    <div class="d-flex align-items-start">
        <div class="me-2 w-100">
            <input type="email" asp-for="Email" placeholder="Email address" class="form-control" maxlength="65" hydro-bind />
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
        <button class="ms-2 btn btn-primary" type="submit">Submit</button>
    </div>
</form>

and relevant part of model class

public class EmailLeads : HydroComponent
{   
    public string? AlertClass { get; set; }
    public string? Message { get; set; }

    [Required(ErrorMessage = "Email is required")]      
    public string? Email { get; set; } = default!;

    public async Task SubmitAsync()
    {
        //if (!ModelState.IsValid) return;
        if (!Validate()) return;

        // stuff happens in db
    }   
}

The problem is after I fill in a value and click Submit, the validation has not refreshed, and Validate returns false. I put a breakpoint in my Submit method, and I check the value of Email property, and I see it's null. Do I need to put some other binding event on my html input?

image

kjeske commented 3 months ago

Are you using v0.14.2?

kjeske commented 3 months ago

It's actually a bug in Hydro. The issue here is type="email". I will fix it shortly, but a workaround for now is to use type="text".

adamfoneil commented 3 months ago

thank you @kjeske ! yes I'm using 0.14.2