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:
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 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!
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
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.
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.
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.
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.
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!
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.
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:
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
In the short term, I would recommend doing this:
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!
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!
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-invalidon 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
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.Hmm. Maybe use the
ng-touchedin addition tong-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.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.
It seems that the way to achieve this would be to use the
ng-submittedclass, which appears on the form when you attempt to submit. So, the selector would be something likeform.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
That's it! Added
ng-submittedto 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!
Awesome! Glad to hear it's working for you.
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
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).
is working on a reply...