From 31267f8f14a7dec2432250270cce84f1ccd06943 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 14 Jul 2022 11:56:24 +0200 Subject: [PATCH 1/6] Add example of validation in custom field type --- .../Developer/Extending/Adding-a-Fieldtype.md | 103 ++++++++++++++++++ 1 file changed, 103 insertions(+) diff --git a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md index 2b2ccc72e95..424a4b7ed81 100644 --- a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md +++ b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md @@ -160,3 +160,106 @@ To reference the file you should override the `RenderView` property, e.g.: ```csharp public override string RenderView => "~/App_Plugins/UmbracoFormsCustomFields/backoffice/Common/RenderTypes/mycustomrenderfield.html"; ``` + +## Validation + +If using [jQuery validate](https://jqueryvalidation.org/) it is possible to use various methods in a custom field type, e.g. `equalTo`, `digits` or `remote`. + +For example a Compare field type to compare another field. + +```csharp +public class CompareField : Umbraco.Forms.Core.FieldType +{ + public CompareField() + { + this.Id = new Guid("b83dddc2-bdf3-4a0b-b9ad-f7bba83080df"); + this.Name = "Compare Field"; + this.Description = "Compare input to another field."; + this.Icon = "icon-autofill"; + this.FieldTypeViewName = "FieldType.Compare.cshtml"; + this.DataType = FieldDataType.String; + this.SortOrder = 10; + this.SupportsRegex = true; + } + + [Setting("Compare Field", + Description = "Compare field", + View = "textfield")] + public string CompareField { get; set; } + + /// + /// Gets or sets a value indicating whether the field label should be shown. + /// PreValues are a single element, a boolean indicating whether the default for the the checkbox is "checked". + /// + [Setting("Show Label", Description = "Indicate whether the the field's label should be shown when rendering the form.", View = "checkbox", PreValues = "true", DisplayOrder = 20)] + public string ShowLabel { get; set; } = string.Empty; + + /// + public override bool HideLabel => ShowLabel == "False"; // Checking explicitly for false so the backward compatible default is to show the label. + + public override string GetDesignView() => + "~/App_Plugins/UmbracoForms/backoffice/Common/FieldTypes/Textfield.html"; + + public override IEnumerable ValidateField(Form form, Field field, IEnumerable postedValues, HttpContext context, IPlaceholderParsingService placeholderParsingService) + { + var baseValidation = base.ValidateField(form, field, postedValues, context, placeholderParsingService); + var value = postedValues.FirstOrDefault(); + + var compareField = GetPostFieldValue(form, context, CompareField); + + if (compareField == null) + return baseValidation; + + if (value != null && value.ToString() == compareField) + { + return baseValidation; + } + + var custom = new List(); + custom.AddRange(baseValidation); + custom.Add("Email does not match."); + + return custom; + } + + private static string GetPostFieldValue(Form form, HttpContext context, string key) + { + Field? field = GetPostField(form, key); + if (field == null) + { + return string.Empty; + } + + return context.Request.HasFormContentType && context.Request.Form.Keys.Contains(field.Id.ToString()) + ? context.Request.Form[field.Id.ToString()].ToString().Trim() + : string.Empty; + } + + private static Field? GetPostField(Form form, string key) => form.AllFields.SingleOrDefault(f => f.Alias == key); +} +``` + +```csharp +@using Umbraco.Forms.Web +@model Umbraco.Forms.Web.Models.FieldViewModel + +@inject Umbraco.Forms.Web.Services.IFormRenderingService FormRenderingService + +@{ + var maxLength = Model.GetSettingValue("MaximumLength", 255); + var fieldType = Model.GetSettingValue("FieldType", "text"); + var autocompleteAttribute = Model.GetSettingValue("AutocompleteAttribute", string.Empty); + var compareField = Model.GetSettingValue("CompareField", string.Empty); + + var form = FormRenderingService.GetForm(Guid.Parse("0638c6f0-f6db-460d-b462-6dc393a8ae0c")); + var field = form?.AllFields.SingleOrDefault(x => x.Alias == compareField); +} + + placeholder="@Model.PlaceholderText" }} + @{if (string.IsNullOrEmpty(autocompleteAttribute) == false) { autocomplete="@autocompleteAttribute" }} + @{if (string.IsNullOrEmpty(compareField) == false) { data-val-equalto="Not equal to" data-val-equalto-other="@field?.Id" }} + @{if (Model.Mandatory || Model.Validate) { data-val="true" }} + @{if (Model.Mandatory) { data-val-required="@Model.RequiredErrorMessage" }} + @{if (Model.Validate) { data-val-regex="@Model.InvalidErrorMessage" data-val-regex-pattern="@Html.Raw(Model.Regex)" }} /> +``` From ac748e3222c392c00a57d7afd0e290ff720a0fe8 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 14 Jul 2022 12:25:47 +0200 Subject: [PATCH 2/6] Add field caption --- Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md index 424a4b7ed81..015561d7ad2 100644 --- a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md +++ b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md @@ -258,7 +258,7 @@ public class CompareField : Umbraco.Forms.Core.FieldType placeholder="@Model.PlaceholderText" }} @{if (string.IsNullOrEmpty(autocompleteAttribute) == false) { autocomplete="@autocompleteAttribute" }} - @{if (string.IsNullOrEmpty(compareField) == false) { data-val-equalto="Not equal to" data-val-equalto-other="@field?.Id" }} + @{if (string.IsNullOrEmpty(compareField) == false) { data-val-equalto="Not equal to @field?.Caption" data-val-equalto-other="@field?.Id" }} @{if (Model.Mandatory || Model.Validate) { data-val="true" }} @{if (Model.Mandatory) { data-val-required="@Model.RequiredErrorMessage" }} @{if (Model.Validate) { data-val-regex="@Model.InvalidErrorMessage" data-val-regex-pattern="@Html.Raw(Model.Regex)" }} /> From 33c34e7c3462137a14c1d9eabcfb58597086731e Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 14 Jul 2022 12:46:19 +0200 Subject: [PATCH 3/6] Update setting field --- .../Developer/Extending/Adding-a-Fieldtype.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md index 015561d7ad2..1ba0ffec1ab 100644 --- a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md +++ b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md @@ -182,10 +182,10 @@ public class CompareField : Umbraco.Forms.Core.FieldType this.SupportsRegex = true; } - [Setting("Compare Field", - Description = "Compare field", + [Setting("Field to compare", + Description = "Alias of field to compare.", View = "textfield")] - public string CompareField { get; set; } + public string FieldToCompare { get; set; } /// /// Gets or sets a value indicating whether the field label should be shown. @@ -205,19 +205,19 @@ public class CompareField : Umbraco.Forms.Core.FieldType var baseValidation = base.ValidateField(form, field, postedValues, context, placeholderParsingService); var value = postedValues.FirstOrDefault(); - var compareField = GetPostFieldValue(form, context, CompareField); + var fieldToCompare = GetPostFieldValue(form, context, FieldToCompare); - if (compareField == null) + if (fieldToCompare == null) return baseValidation; - if (value != null && value.ToString() == compareField) + if (value != null && value.ToString() == fieldToCompare) { return baseValidation; } var custom = new List(); custom.AddRange(baseValidation); - custom.Add("Email does not match."); + custom.Add("Not equal to."); return custom; } @@ -249,7 +249,7 @@ public class CompareField : Umbraco.Forms.Core.FieldType var maxLength = Model.GetSettingValue("MaximumLength", 255); var fieldType = Model.GetSettingValue("FieldType", "text"); var autocompleteAttribute = Model.GetSettingValue("AutocompleteAttribute", string.Empty); - var compareField = Model.GetSettingValue("CompareField", string.Empty); + var fieldToCompare = Model.GetSettingValue("FieldToCompare", string.Empty); var form = FormRenderingService.GetForm(Guid.Parse("0638c6f0-f6db-460d-b462-6dc393a8ae0c")); var field = form?.AllFields.SingleOrDefault(x => x.Alias == compareField); @@ -258,7 +258,7 @@ public class CompareField : Umbraco.Forms.Core.FieldType placeholder="@Model.PlaceholderText" }} @{if (string.IsNullOrEmpty(autocompleteAttribute) == false) { autocomplete="@autocompleteAttribute" }} - @{if (string.IsNullOrEmpty(compareField) == false) { data-val-equalto="Not equal to @field?.Caption" data-val-equalto-other="@field?.Id" }} + @{if (string.IsNullOrEmpty(fieldToCompare) == false) { data-val-equalto="Not equal to @field?.Caption" data-val-equalto-other="@field?.Id" }} @{if (Model.Mandatory || Model.Validate) { data-val="true" }} @{if (Model.Mandatory) { data-val-required="@Model.RequiredErrorMessage" }} @{if (Model.Validate) { data-val-regex="@Model.InvalidErrorMessage" data-val-regex-pattern="@Html.Raw(Model.Regex)" }} /> From 122c0b122d50fe94641e9f3fe27c0c3e8a45096a Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 14 Jul 2022 13:01:55 +0200 Subject: [PATCH 4/6] Use weight icon Using `icon-legal` (weight icon) https://nicbell.github.io/ucreate/icons.html --- Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md index 1ba0ffec1ab..76ab3ea7657 100644 --- a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md +++ b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md @@ -175,7 +175,7 @@ public class CompareField : Umbraco.Forms.Core.FieldType this.Id = new Guid("b83dddc2-bdf3-4a0b-b9ad-f7bba83080df"); this.Name = "Compare Field"; this.Description = "Compare input to another field."; - this.Icon = "icon-autofill"; + this.Icon = "icon-legal"; this.FieldTypeViewName = "FieldType.Compare.cshtml"; this.DataType = FieldDataType.String; this.SortOrder = 10; From ffa92dd78b9510521a0914840444f5650b685d3d Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 14 Jul 2022 13:13:40 +0200 Subject: [PATCH 5/6] Minor updates --- .../UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md index 76ab3ea7657..99f28dea133 100644 --- a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md +++ b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md @@ -173,12 +173,12 @@ public class CompareField : Umbraco.Forms.Core.FieldType public CompareField() { this.Id = new Guid("b83dddc2-bdf3-4a0b-b9ad-f7bba83080df"); - this.Name = "Compare Field"; + this.Name = "Compare field"; this.Description = "Compare input to another field."; this.Icon = "icon-legal"; this.FieldTypeViewName = "FieldType.Compare.cshtml"; this.DataType = FieldDataType.String; - this.SortOrder = 10; + this.SortOrder = 20; this.SupportsRegex = true; } From 6258af5e072f395f8c3129806029e612b51f672a Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 8 Aug 2022 16:12:13 +0200 Subject: [PATCH 6/6] Update Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md Co-authored-by: Sophie <35264991+sophie-neale@users.noreply.github.com> --- Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md index 99f28dea133..49f9a2f0679 100644 --- a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md +++ b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md @@ -191,7 +191,7 @@ public class CompareField : Umbraco.Forms.Core.FieldType /// Gets or sets a value indicating whether the field label should be shown. /// PreValues are a single element, a boolean indicating whether the default for the the checkbox is "checked". /// - [Setting("Show Label", Description = "Indicate whether the the field's label should be shown when rendering the form.", View = "checkbox", PreValues = "true", DisplayOrder = 20)] + [Setting("Show Label", Description = "Indicate whether the field's label should be shown when rendering the form.", View = "checkbox", PreValues = "true", DisplayOrder = 20)] public string ShowLabel { get; set; } = string.Empty; ///