Is there any way to make SFTextBox to do client side validation for Required attribute

[Andrew Olowookere]

Hi,

I am currently using your SyncFusion Blazor components – I noticed there is no client side Required options as they do in HTML5. I have some scenarios where I cannot apply the [Required] attribute to the Model. Thus it needs to be done client side.

My SyncFusion Code is: <SfTextBox @bind-Value="_model.username" />

In HTML5 I would do: <input type="text" id="username" name="username" required>

Is there any way to make your TextBox to do client side validation. My only solution at the moment is to use HTML5 controls which defeats the point of the SyncFusion Form controls.

Other alternatives would to be inject JavsScript to the Blazor component which I want to avoid as it involves verbose coding

My preference is to stay loyal the SyncFusion product, any advice would be greatly appreciated

[Sureshkumar P]

Andrew, 

 

We can achieve your requirement by using htmlAttribute property. Please find the code example here

 

div> 

    <form class="row" @onsubmit="SubmitForm"> 

        <div class="form-row"> 

            <label for="exampleFormControlInput1" class="form-label">Email address</label> 

            <input type="email" class="form-control" id="exampleFormControlInput1" required placeholder="[email protected]" @bind="@details.Email"> 

        </div> 

        <div class="form-row"> 

            <label for="exampleFormControlInput1" class="form-label">Phone</label> 

            <input type="tel" class="form-control" id="exampleFormControlInput1" required placeholder="[email protected]" @bind="@details.Phone"> 

        </div> 

        <div class="form-row"> 

            <label for="exampleFormControlInput1" class="form-label">Textbox</label> 

            <SfTextBox Placeholder="Email" Type="InputType.Text" HtmlAttributes="@(new Dictionary<string,object>() { { "required", "true" } })" 

                       @bind-Value="@details.Text"></SfTextBox> 

        </div> 

        <div class="form-row"> 

            <button type="submit" class="btn btn-primary" @onclick="SubmitForm">Send</button> 

        </div> 

    </form> 

 

</div> 

@code { 

    private ContactDetails details = new ContactDetails(); 

 

    public async void SubmitForm() 

    { 

        //var result = await Http.PostAsJsonAsync("Contact", details); 

    } 

 

    public class ContactDetails 

    { 

        [Required] 

        public string Email { get; set; } 

 

        [Required] 

        public string Phone { get; set; } 

 

        [Required] 

        public string Text { get; set; } 

    } 

 

} 

 

Regards, 

Sureshkumar P 

[Andrew Olowookere]

Thank you  Sureshkumar P 

[Sureshkumar P]

Hi Andrew, 

 

Thanks for your update. 

 

Regards, 

Sureshkumar P