Umbraco Member - How to set a custom mandatory property to be required in the registration form?

Question

I've created new MemberType with some extra custom properties, marked as Mandatory.

In the registration form I want these properties to be set as required, so if you don't fill them, you won't be able to proceed with the registration of a new member.

In the Member section, the properties are correctly set as Mandatory. Here's a screenshot: https://i.ibb.co/bR4sd2v/immagine.png

Here's my code of the registration form:

using (Html.BeginUmbracoForm<UmbRegisterController>("HandleRegisterMember"))
    {
        <div class="row justify-content-center no-gutters">
            <div class="col-8 mx-auto pt-5">
                @Html.ValidationSummary("registerModel", true)

                @if (registerModel.MemberProperties != null)
                {
                    <div class="form-row justify-content-center">
                        <div class="form-group col-md-6">
                            @Html.TextBoxFor(m => registerModel.MemberProperties[0].Value, new { @class = "form-control rounded-0", @placeholder = registerModel.MemberProperties[0].Name})
                            @Html.HiddenFor(m => registerModel.MemberProperties[0].Alias)
                            @Html.ValidationMessageFor(m => registerModel.MemberProperties[0].Alias)
                        </div>
                        <div class="form-group col-md-6">
                            @Html.TextBoxFor(m => registerModel.MemberProperties[1].Value, new { @class = "form-control rounded-0", @placeholder = registerModel.MemberProperties[1].Name})
                            @Html.HiddenFor(m => registerModel.MemberProperties[1].Alias)
                            @Html.ValidationMessageFor(m => registerModel.MemberProperties[1].Alias)
                        </div>
                    </div>

                }

                <div class="form-row justify-content-center pt-5">
                    <div class="form-group col-md-6">
                        @Html.TextBoxFor(m => registerModel.Email, new { @class = "form-control rounded-0", @placeholder = "Email"})
                        @Html.ValidationMessageFor(m => registerModel.Email)
                    </div>
                    <div class="form-group col-md-6">
                        @Html.PasswordFor(m => registerModel.Password, new { @class = "form-control rounded-0", @placeholder = "Password"})
                        @Html.ValidationMessageFor(m => registerModel.Password)
                    </div>
                </div>

                <div class="form-row justify-content-center pt-5">
                    <div class="form-group col-md-6">
                        <button class="btn btn-light text-uppercase w-100" type="submit">Registrati</button>
                    </div>
               </div>

            </div>
        </div>

        @Html.HiddenFor(m => registerModel.MemberTypeAlias)
        @Html.HiddenFor(m => registerModel.RedirectUrl)
        @Html.HiddenFor(m => registerModel.UsernameIsEmail)

    }

I expect that when I click on the Sumbit button (in my case is "Registrati"), under the input fields will appear the validation message saying that those fields are required. And the registration could not proceed until I fill them.

Like it happens with the standard fields Email and Password. Here's a screenshot: https://i.ibb.co/z2cD3TC/immagine.png

How can I check if those fields are required, and show the error message?

Mikkel Mikkel · Accepted Answer · 2019-06-13T07:57:26

Your fields may be required within Umbraco, but the code in your views doesn't know that. In order to achieve validation through the HTML Helpers you're using, you'll need to create a ViewModel like this:

public class MyViewModel
{
    [Required(ErrorMessage = "Full name is required")]
    public string FullName { get; set; }

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

    [Required(ErrorMessage = "Password is required")]
    [DataType(DataType.Password, ErrorMessage = "Password is invalid")]
    public string Password { get; set; }
}

Your HTML helpers should then understand which fields are required and which aren't, which means you can get both clientside validation as well as serverside validation :)

Umbraco Member - How to set a custom mandatory property to be required in the registration form?

1 Answers