Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Judasegg 3 posts 73 karma points
    Aug 08, 2017 @ 10:55

    Validation on Settings for a custom FieldType

    I have created a custom FieldType and added properties with the [Setting] attribute added, such that the properties end up as Settings for which you can provide a value when you are adding the Field to a form.

    However, I can't see an obvious way to validate the properties themselves, I've tried adding ValidationAttributes to the properties but this doesn't work.

    I feel like I must be missing something obvious, as it seems odd that the settings for a given Field are not subject to any kind of validation.

    That is, I am referring to when you are actually designing the form and are assigning specific settings for the fieldtype. In my case I have added Min and Max settings for my custom FieldType, and obviously Min shouldn't be able to be greater than Max, I was hoping I could get unobtrusive validation wired up for when trying to add the FieldType to form.

  • Rick Mason 38 posts 169 karma points
    Dec 18, 2017 @ 11:55
    Rick Mason

    It's not hooking into the proper validation but you could get something working with a custom view to edit the setting.

    The [Setting] attribute has a view property:

        [Setting("My setting", view ="my-view")]

    The view is an HTML file in /App_Plugins/UmbracoForms/Backoffice/Common/SettingTypes, so you copy one as my-view.html and add some custom JavaScript that fits your needs.

  • Rick Mason 38 posts 169 karma points
    Dec 18, 2017 @ 12:24
    Rick Mason

    If you're just looking for a number you could use an HTML5 input type. Your view would be:

    <input type="number" ng-model="setting.value" min="1" max="5" />
  • Martin Rhodes 12 posts 129 karma points
    Dec 05, 2018 @ 16:23
    Martin Rhodes

    In the Angular controller of your custom field type you can hook into the validation of the settings form and add some custom logic. You can then show validation errors and block submission until all errors have been cleared. Something like:

        // retrieve the Angular scope of the main settings overlay
        var settingsScope = angular.element('[name="overlayForm"]').scope();
        // add custom validation callback function to formSubmitting 
        settingsScope.$$listeners.formSubmitting.push(function (event, args) {
            var isInvalid = false;
            var errorMessages = [];
            if (!$scope.model.setting1) {
                isInvalid = true;
                errorMessages.push('Setting1 must be set.');
            if (!$scope.model.setting2) {
                isInvalid = true;
                errorMessages.push('Setting2 must be set.');
            event.currentScope.overlayForm.$invalid = isInvalid;
            if (isInvalid) {
                for (var errorMessage of errorMessages) {

    Please note that if you are going to use the notificationsService to show the error messages, you will also need to make sure this is injected into the controller.

Please Sign in or register to post replies

Write your reply to: