Copied to clipboard

Flag this post as spam?

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


  • Nik 1617 posts 7263 karma points MVP 7x c-trib
    Nov 24, 2017 @ 16:45
    Nik
    0

    Custom Property editor with multiple fields - validation

    Hi All,

    Just after some pointers on how I can apply my own validation logic to a custom property editor that has multiple fields. Basically if when a property using the custom editor is added and the property is set to mandatory I want to be able to apply my own logic to mandatory check.

    The reason being the property editor has to have certain fields completed in order to make it valid else it is considered incomplete.

    Thanks,

    Nik

  • Dennis Flæng Jørgensen 35 posts 145 karma points c-trib
    Nov 24, 2017 @ 19:09
    Dennis Flæng Jørgensen
    1

    This is a quick and dirty example i made that uses my own validation on a property field.

    View

    <div ng-controller="My.MarkdownEditorController" class="umb-editor">
        <input type="number" ng-model="model.value" id="{{model.alias}}" val-property-validator="myValidateFunction" class="umb-editor" name="myField" />
        <br />
    
        <span class="help-inline" val-msg-for="myField" val-toggle-msg="myCustomValidationKey" 
              style="display: none;">Invalid</span>
    </div>
    

    Controller

    angular.module("umbraco")
        .controller("My.MarkdownEditorController",
        function ($scope) {
    
    
        $scope.myValidateFunction = function () {
    
            //set isValid too true so that if this property isnt marked as mandatory on the document type the property is allways valid
            var isValid = true;
    
            if ($scope.model.validation.mandatory) {
                var inputValue = $scope.model.value;
                var intValue = parseInt(inputValue);
                isValid = intValue % 2 === 0;
            }
    
            return {
                isValid: isValid,
                errorMsg: "Value cannot be empty",
                errorKey: "myCustomValidationKey"
            };
        }
    
    });
    

    Manifest

    {   
        //you can define multiple editors   
        propertyEditors: [      
            {
                /*this must be a unique alias*/ 
                alias: "My.MarkdownEditor",
                /*the name*/
                name: "Markdown editor",
                /*the html file we will load for the editor*/
                editor: {
                    view: "~/App_Plugins/MarkDownEditor/markdowneditor.html"
                }
            }
        ]
        ,
        //array of files we want to inject into the application on app_start
        javascript: [
            '~/App_Plugins/MarkDownEditor/markdowneditor.controller.js'
        ]
    }
    

    You can also check the Umbraco Source Code for an example https://github.com/umbraco/Umbraco-CMS/tree/9290f61f9485c5bef0aa9a95e05e8acefa9ce221/src/Umbraco.Web.UI.Client/src/views/propertyeditors/tags

Please Sign in or register to post replies

Write your reply to:

Draft