search

aurelia-ui-toolkits / aurelia-materialize-bridge

Materialize CSS components for Aurelia
http://aurelia-ui-toolkits.github.io/demo-materialize/
MIT License
156 stars 53 forks source link

validation class for checkboxes not set #536

Closed eikaramba closed 5 years ago

eikaramba commented 5 years ago

i tried having a validation rule for a checkbox. the actual validation works, however in the browser the input does not get the ".invalid" class and thus is not styled in red.

Code: <md-checkbox validate="true" checked.bind="terms & validate">Ich habe die <a style="text-decoration: underline" class="bright" click.trigger="scrollTo('#terms')">Nutzungsbedingungen</a> gelesen und willige in diese ein.</md-checkbox>

grafik

MaximBalaganskiy commented 5 years ago

Original materialize checkbox does not support validation. You could just display an error message below it or, as I did, write a custom validation container element which can be used on any html you want validated, e.g. radio group. I will probably add it later to the bridge but for now feel free to copy it from the gist https://gist.github.com/MaximBalaganskiy/74ef29931975bd641a159031162b2316

MaximBalaganskiy commented 5 years ago

image

MaximBalaganskiy commented 5 years ago

Done via e03c9198d9931df694e657f799dce884c507aaeb

MaximBalaganskiy commented 5 years ago

http://aurelia-ui-toolkits.github.io/demo-materialize/#/samples/validation-container/basic-use

eikaramba commented 5 years ago

hey @MaximBalaganskiy i already use something like that you can see it here: https://psyweb.uni-muenster.de/signup

just click "einloggen". As you see here the checkbox actually turns red as it used to in the past(i think i just needed to add the css code for that, but the class selector was set by AMB). I updated from 0.x to 1.x now and migrated everything, that's why i said it is not working anymore. I observed that it seems also the validationRenderer got some refactoring, maybe because of that, not sure...

You are right i checked again and Materialize indeed does not provide a style for this. Too bad, i think it is easy to do (just add the .invalid class to the input field in the same way how it is done to text fields) and add one simple line of css class to make the border red of the checkbox.

I don't know if you agree to "patch" such functionality to AMB or it is better to hope the materialize guys provide something in the future. Anyway your validation-container is something i want to have a look at, although i already have it. But always good to stick with the frameworks choices :)