Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • LeaTark 22 posts 123 karma points
    Feb 24, 2017 @ 14:09
    LeaTark
    0

    Custom Validation

    Since CAPTCHA is a requirement for us, I've had a go at creating my first custom field following this guide http://www.formulate.rocks/articles/custom-field-types

    I think it's gone pretty well so far.

    There's a field type to pick in the back office and a rendered CAPTCHA control.

    However, it needs server side validation and I don't know where that happens.

    Any pointers would be greatly appreciated.

    Also, I wasn't sure where I was supposed to put this function

    function directive() {
    return {
        restrict: "E",
        replace: true,
        // Note that it's "templateUrl" rather than "template".
        templateUrl: "CustomFields/captcha.html",
        controller: "formulate.captcha",
        scope: {
            configuration: "="
        }
    };
}

    I ended up putting it in formulate.js but that can get overwritten, right?

    Copy Link
  • Laurent Lequenne 123 posts 248 karma points
    Feb 24, 2017 @ 14:42
    Laurent Lequenne
    0
    • the directive should handle some event from the DOM that will run some code of your controller, that controller should be injected by some service that could handle the server side validation.
    Copy Link
  • LeaTark 22 posts 123 karma points
    Feb 24, 2017 @ 15:25
    LeaTark
    0

    We're using reCAPTCHA, which adds an extra field g-recaptcha-response.

    It's verified by sending the value to Google along with a private key, so it has to be done server side.

    We already have the function that handles sending the response to Google and retrieving the status.

    It's just the part of creating a validator in Formulate and using this status as its value that I'm missing.

    Copy Link
  • Nicholas Westby 2054 posts 7103 karma points c-trib
    Feb 24, 2017 @ 16:47
    Nicholas Westby
    0

    There will be a couple gotchas, but here's the idea.

    You'd create your CAPTCHA field just as you've been doing. However, Formulate doesn't yet support validations local to fields (i.e., validations are built separately), so you'd also have to create a separate validation. Even once you've done that, you'll still run into an issue: https://github.com/rhythmagency/formulate/blob/cc8ad53128594739731141e2ed94c867087ea143/src/formulate.api/Submissions.cs#L162

    I still need to implement server-side validation handling. You can submit a pull request if you are in a hurry and I'll make sure to get a new version of Formulate out so you can make use of it. Otherwise, I'll get that in there at some point or another.

    Here are some of Formulate's built in validations (mandatory and regex) you can reference: https://github.com/rhythmagency/formulate/tree/cc8ad53128594739731141e2ed94c867087ea143/src/formulate.app/Validations/Kinds

    Regarding where to put your directive function, you can put that anywhere. Of course, you'll have to register your directive by passing that function into the .directive() function, as shown here: https://docs.angularjs.org/guide/directive

    Register Directive

    Here's an example of how Formulate's built-in drop down registers its directive: https://github.com/rhythmagency/formulate/blob/af76b07d6e31755f32105ff502022060db31ae8e/src/formulate.app/Directives/fields/dropDownField/dropDownField.js#L5

    Doesn't need to be inside formulate.js (as you've correctly noted, that will get overwritten on upgrades).

    Assuming you create a file called whatever.js located at ~/App_Plugins/AnyOldFolder/whatever.js, you'd create a package.manifest located at ~/App_Plugins/AnyOldFolder/package.manifest that looks like this:

    {
    "javascript": [
        "~/App_Plugins/AnyOldFolder/whatever.js"
    ]
}

    That will ensure Umbraco runs your JavaScript when you log into the back office. You can see Formulate doing similar here: https://github.com/rhythmagency/formulate/blob/af76b07d6e31755f32105ff502022060db31ae8e/src/formulate.app/App_Plugins/formulate/package.manifest#L3

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft