Blazor EditForm missing Email and Phone? - blazor-server-side

Question

Is there a validator for Emails and Phone # in EditForm like there is in Form (e.g.) "tel" for phone and "email" for emails.
Even though they test for formatting not existence of phone and email.

Answer 1

Hy,
What i did was ; create a public class and link this to the editform.
Using Regex expressions you can create your own validation.
public class RegisterAccountModel
{
[Required(AllowEmptyStrings = false, ErrorMessage = "Email adres Missing")]
[EmailAddress(ErrorMessage = "Unvalid Email Address")]
public string Email { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Paswoord Missing")]
[DataType(DataType.Password)]
[StringLength(100)] //, ErrorMessage = "Paswoord dient minstens {2} characters te bevatten waaronder minstens één nummer.", MinimumLength = 6)]
[Display(Name = "Paswoord")]
[RegularExpression("^()(?=.*[\\d])(?=.*[a-z])(?=.*[a-zA-Z]).{6,}$", ErrorMessage = "Min 6 characters and 1 capital letter.")]
public string Password { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Paswoord not Matching")]
[Compare(nameof(Password), ErrorMessage = "Paswoord not Matching")]
public string ConfirmPassword { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Company Is Empty")]
public string Bedrijfsnaam { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Name is empty)]
public string Naam { get; set; }
}
When you want to use this class in your edit form you can do :
<EditForm Context="NewUser" OnSubmit="FormSubmitted" Model="registerAccountModel">
<div class="DataValidationRemark">#RegisterRemarks</div>
<DataAnnotationsValidator />
<ValidationSummary />
<table>
<tr>
<td><p class="label">Email:</p></td>
<td><p><InputText #bind-Value="registerAccountModel.Email" /></p></td>
</tr>
<tr>
<td><p class="label">#lblPassword :</p></td>
<td><p><input type="password" #bind-value="registerAccountModel.Password" /</p></td>
</tr>
</EditForm>
Regarding the submit : This needs to be on your razor page. or code behind file.
#code {
private RegisterAccountModel registerAccountModel = new RegisterAccountModel();
public void FormSubmitted(EditContext editContext)
{
isValidated = editContext.Validate();
if (isValidated)
{
Task.Run(() => RegisterUser());
}
}
Regarding the register user : still on the same razor page
private async Task RegisterUser()
{
//If the form validation is done
if (isValidated)
{
var result = await userManager.CreateAsync(new IdentityUser { UserName = registerAccountModel.Email, Email = registerAccountModel.Email, EmailConfirmed = false }, registerAccountModel.Password);
if (result.Succeeded)
{
//DO STUFF
}
}
}
}
Let me know if it worked for you, or if you got stuck.
Regards,
Mathias