Validation message isn't used for validation expression

[bjarnef]

On an Umbraco Cloud project we have the following for an email field type:

The required message is used, but for the validation expression, the message isn't used, but seems to use a standard English message.

FieldType.Textfield.cshtml

@using Umbraco.Forms.Web
@model Umbraco.Forms.Web.Models.FieldViewModel
@{
    var maxLength = Model.GetSettingValue<int>("MaximumLength", 255);
    var fieldType = Model.GetSettingValue<string>("FieldType", "text");
    var autocompleteAttribute = Model.GetSettingValue<string>("AutocompleteAttribute", string.Empty);
}

<input type="@fieldType" name="@Model.Name" id="@Model.Id" data-umb="@Model.Id" class="@Html.GetFormFieldClass(Model.FieldTypeName)" value="@Model.ValueAsHtmlString" maxlength="@maxLength"
       @{if (string.IsNullOrEmpty(Model.PlaceholderText) == false) { <text> placeholder="@Model.PlaceholderText" </text> }}
       @{if (string.IsNullOrEmpty(autocompleteAttribute) == false) { <text> autocomplete="@autocompleteAttribute" </text> }}
       @{if (Model.Mandatory || Model.Validate) { <text> data-val="true" </text> }}
       @{if (Model.Mandatory) { <text> data-val-required="@Model.RequiredErrorMessage" </text> }}
       @{if (Model.Validate) { <text> data-val-regex="@Model.InvalidErrorMessage" data-val-regex-pattern="@Html.Raw(Model.Regex)" </text> }} />

Umbraco v10.0.1 Forms v10.0.5

[bjarnef]

@AndyButland are you able to reproduce this?

We are now on:

Umbraco v10.2.1 Forms v10.1.3

but the error message for validation expression isn't respected:

[TRexStark]

This is still an issue on Forms 10.2.3

[bjarnef]

@AndyButland can you check if this has been fixed in recent changes or if it still an issue?

[AndyButland]

No, it's still an issue. If you know the background to it it's actually kind of expected, but I can see for someone coming across it it appears to be a bug.

To summarise - the validation we've had for a long time with Forms is the one via the regular expression, where you can configure a pattern to validate against and a message to display if it fails. There isn't any issue with this to my knowledge.

In a more recent version of Forms we added the option to set the "field type" for a text field, of which one of the options is "email". If you enter an invalid email, the browser will get involved directly and display the message you see. But it doesn't know anything about the validation message you've configured here, as that isn't invoked.

Ideally we'll find a way in this situation, such that the browser message can be initialised from the validation expression message, if that's set to "email" and has been set.

[bjarnef]

@AndyButland okay, however from a UI/UX perspective (or content editors manage the form), it seems odd the mandatory message is displayed, but not the message at regular validation expression.

Not sure if this is used in other contexts though?

[AndyButland]

I had a further look into this one today. Just to recap, the problem is that with Umbraco Forms you can both set a validation regular expression/message AND you can define the type of the input field as "email". In that situation the browser's default message for an invalid email takes precedence over the one defined in Umbraco Forms.

What we ideally want to do is to override the browser's message with the Umbraco Forms one.

After a bit of time experimenting with calls to setCustomValidity that I couldn't get to work, I found could update this just by setting a title. You could try out if you create a file at Views\Partials\Forms\Themes\default\Fieldtypes\FieldType.Textfield.cshtml and copy in the following code.

@using Umbraco.Forms.Web
@model Umbraco.Forms.Web.Models.FieldViewModel
@{
    var maxLength = Model.GetSettingValue<int>("MaximumLength", 255);
    var fieldType = Model.GetSettingValue<string>("FieldType", "text");
    var autocompleteAttribute = Model.GetSettingValue<string>("AutocompleteAttribute", string.Empty);
    var hasCustomInvalidEmailMessage = string.Equals(fieldType, "email", StringComparison.InvariantCultureIgnoreCase) &&
        Model.Validate &&
        !string.IsNullOrWhiteSpace(Model.InvalidErrorMessage);
}
<input style="background-color: palegreen" type="@fieldType" name="@Model.Name" id="@Model.Id" data-umb="@Model.Id" class="text @Html.GetFormFieldClass(Model.FieldTypeName)" value="@Model.ValueAsHtmlString" maxlength="@maxLength"
       @{if (string.IsNullOrEmpty(Model.PlaceholderText) == false) { <text> placeholder="@Model.PlaceholderText" </text> }}
       @{if (string.IsNullOrEmpty(autocompleteAttribute) == false) { <text> autocomplete="@autocompleteAttribute" </text> }}
       @{if (Model.Mandatory || Model.Validate) { <text> data-val="true" </text> }}
       @{if (Model.Mandatory) { <text> data-val-required="@Model.RequiredErrorMessage" aria-required="true" </text> }}
       @{if (Model.Validate) { <text> data-val-regex="@Model.InvalidErrorMessage" data-val-regex-pattern="@Html.Raw(Model.Regex)" </text> }}
       @{if (hasCustomInvalidEmailMessage) { <text> title="@Model.InvalidErrorMessage" </text> }}
       @{if (!string.IsNullOrEmpty(Model.ToolTip)) { <text> aria-describedby="@(Model.Id)_description" </text> } }/>

If you then open up a form on the front-end that uses a Short Answer field, defined with a custom email validation and a field type of "email", you'll see the updated behaviour. I made it green just so you can be sure you are seeing the custom partial view and not the built-in one. Otherwise the lines related to the hasCustomInvalidEmailMessage flag are the only changes.

It works, but by setting the title attribute. Which is fine if the message is something like "Please enter a valid email address." but not so much if the message is along the lines of "Sorry, that isn't a valid email". As you see this message when you hover over the input even if there's no entry in it yet. Seems this is correct when it comes to the spec, so maybe it's OK - but I'm just not sure it seems quite right depending on how people are using these messages.

So not sure yet if this is a good idea to add to Forms as the default behaviour for the field, but wondered what your thoughts were @bjarnef or if you can see if we could improve it. Thanks.