@page "/validation"
@rendermode InteractiveServer

<h3>Validation</h3>
<EditForm EditContext="@editContext" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator/>
    @* <ValidationSummary/> *@

    <div class="form-group">
        <label>Username:</label>
        <InputText @bind-Value="login.Id" @oninput="HandlerInputChange" @onblur="HandlerInputChange"/>
        @if (isIdValid)
        {
            <p class="success-message">Username is valid!</p>
        }
        else
        {
            <ValidationMessage For="@(() => login.Id)" style="padding-left: 10px"/>
        }
    </div>

    <div class="form-group">
        <label>PW:</label>
        <InputText @bind-Value="login.Pw" @oninput="HandlerInputChange" @onblur="HandlerInputChange"/>

        @if (isPwValid)
        {
            <p class="success-message">pass is valid!</p>
        }
        else
        {
            <ValidationMessage For="@(() => login.Pw)" style="padding-left: 10px"/>
        }
    </div>

    <div class="form-group">
        <label>Email:</label>
        <InputText @bind-Value="login.Email" @oninput="HandlerInputChange" @onblur="HandlerInputChange"/>
        
        @if (isEmailValid)
        {
            <p class="success-message">Email is valid!</p>
        }
        else
        {
            <ValidationMessage For="@(() => login.Email)" style="padding-left: 10px"/>
        }

    </div>

    <div class="form-group form-actions">
        <button type="submit">Submit</button>
    </div>
</EditForm>
<hr>