Copied to clipboard

Flag this post as spam?

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


  • Steve 140 posts 321 karma points
    Apr 13, 2016 @ 19:48
    Steve
    1

    Formulate validation

    Hi Nicholas,
    I'd like the mandatory field validation message to refer to the field which is mandatory, rather than just a fixed message as entered in the Validation Library.
    To achieve this, I changed line 29 in responsive.bootstrap.angular.js to:

    elMessage.text(field.label + ' ' + validation.configuration.message);
    

    Seems to work but wondering if there is a better way to do this as this may not be ideal for other validations (if we need to add them).
    Thanks, Steve

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Apr 13, 2016 @ 20:16
    Nicholas Westby
    0

    In the short term, I would recommend doing this:

    Mandatory Message

    That example shows multiple mandatory validations, each with their own message. That way, you can include the field name in the validation message. Notice I also organized them into folders (that way, you don't see too many validations... you can organize them however you want, such as by form).

    You could also modify that code you pasted to replace a placeholder with the field label or field name (rather than just prefixing the label).

    I have also created a ticket for myself to add this placeholder replacement functionality to the Formulate core: https://github.com/rhythmagency/formulate/issues/33

    Thanks for the feedback. Keep it coming!

  • Steve 140 posts 321 karma points
    Apr 13, 2016 @ 21:04
    Steve
    0

    I like the idea of the scalability in prefixing the error message. It seems like field.label carries the correct text value (even though the Field Label value is not set in the Field itself. I replaced with field.name and got back only 'undefined'.
    In any case, it's working pretty well prefixing field.label
    Could you let me know what class is changed/added to the input field itself on validation error? I can't see anything at the moment - would like to make the input itself also respond to an error.
    Thanks!

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Apr 13, 2016 @ 21:47
    Nicholas Westby
    0

    My coworker, Josef, should get back to you if this is incorrect (he built the frontend template that renders forms), but I believe you should see ng-invalid on a field that fails a validation.

    There is supposed to be an extra class that indicates the type of validation that was invalid (i.e., regex or mandatory), however there seems to be a bug currently that actually uses the validation alias to construct that CSS class. I have created an issue to ensure this gets addressed: https://github.com/rhythmagency/formulate/issues/35

  • Steve 140 posts 321 karma points
    Apr 13, 2016 @ 22:25
    Steve
    0

    The mandatory field seems to start with ng-invalid. Classes do not appear to change upon failing the validation - at least with what we've built so far.

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Apr 13, 2016 @ 22:51
    Nicholas Westby
    0

    Hmm. Maybe use the ng-touched in addition to ng-invalid. I think the idea is that the field is technically invalid even before you've touched it, but once you touch an invalid field you'll want to display an error.

  • Steve 140 posts 321 karma points
    Apr 14, 2016 @ 03:25
    Steve
    0

    Yes, can now update the style but seems like only if the field is touched. Can't get it to work if, for example, there is no interaction other than the submit button clicked. (ie ng-touched not applied to the input)
    This is not inconsistent with the example at docs.angularjs.org/guide/forms (using css classes) so not sure where to look for a solution.
    We'd like the form inputs to respond the same way (highlight with color change) whether they've been touched or not.
    Could easily be down to our lack of Angular knowledge but not sure how to achieve this.

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Apr 14, 2016 @ 04:18
    Nicholas Westby
    100

    It seems that the way to achieve this would be to use the ng-submitted class, which appears on the form when you attempt to submit. So, the selector would be something like form.ng-submitted .ng-invalid, .ng-touched.ng-invalid.

    Josef posted a message that may have more insight, but I won't know until his account gets unlocked: https://our.umbraco.org/forum/using-umbraco-and-getting-started/76590-ourumbracoorg-account-locked

    By the way, these are good questions you're asking. I'll use them as the basis for the styling documentation I'll be writing: https://github.com/rhythmagency/formulate/issues/38

  • Steve 140 posts 321 karma points
    Apr 14, 2016 @ 13:41
    Steve
    0

    That's it! Added ng-submitted to our css:
    form.css-form.ng-submitted input.ng-pristine.ng-invalid{background-color: #FA787E};
    Working beautifully.
    Once familiar with Angular form directive and CSS classes customization is quite straightforward.
    Thanks!

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Apr 14, 2016 @ 14:16
    Nicholas Westby
    0

    Awesome! Glad to hear it's working for you.

  • Josef Kohout 3 posts 75 karma points
    Apr 14, 2016 @ 00:56
    Josef Kohout
    2

    Hi Steve,

    Yes, these classes are added by the angular framework. When the form is in an invalid state, angular puts ng-invalid class on the form and on the field.

    You can chose to apply or ignore styles by using the sibling selector ng-dirty & ng-prestine.

    We do not place any opinion on how this part works - it's an angular opinion.

    Hopefully this will help: http://stackoverflow.com/questions/22443487/angular-automatically-add-ng-invalid-class-on-required-fields

    https://docs.angularjs.org/api/ng/directive/form

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Apr 17, 2016 @ 02:48
    Nicholas Westby
    0

    Hi Steve,

    FYI, the validation placeholder functionality is now part of the Formulate core and is described here: http://www.formulate.rocks/validations

    You will get this functionality if you download the latest version of Formulate (0.2.3.0).

Please Sign in or register to post replies

Write your reply to:

Draft