13 July 2024
inputemail inputpassword dans un EditForm

Blazor – InputEmail & InputPassword

Maybe like me, you wondered why they didn’t add InputEmail and InputPassword in the form components for our Blazor applications …. Because using these components provides a great user experience and ease of implementation for us.

Input componentRendered as…
InputCheckbox<input type=”checkbox”>
InputDate<TValue><input type=”date”>
InputFile<input type=”file”>
InputNumber<TValue><input type=”number”>
InputRadio<TValue><input type=”radio”>
InputRadioGroup<TValue>Group of child InputRadio<TValue>
InputSelect<TValue><select>
InputText<input>
InputTextArea<textarea>
Source : https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-7.0#built-in-input-components

But it’s not like InputPassword and InputEmail are never used… That’s about it! And so we had all possible form fields. Well, I’m not ashamed to say it, but so far I’ve done without and used the classic html tag in my forms

The mystery of “why I never thought of it”!?

A bug in the matrix. That’s all I can think of.

After that, the only excuse I found was that the documentation never mentions this.

You may not believe me but I had to ask Steve Sanderson… “use the ‘type’ attribute: ” and I fell.

Field comparison

Well I’ll take this opportunity to show you a little trick to check the typing of passwords or emails in a form

Most of the time we place 2 email fields with the attribute autocomplete=”off” and in the C# code we compare the values.

💡ASTUCES

If you don’t want your user to be able to cut/copy/paste data in the fields of a form: add the attributes onpaste=”return false;” onCopy=”return false” onCut=”return false”
You can go even further with: onDrag=”return false” onDrop=”return false”

Data annotation to simplify our lives

The easiest way is to use the [Compare] attribute and let the form work its magic! : [Compare(nameof(Email), ErrorMessage = “emails do not match”)]

C#
<code></code>

Leave a Reply