Materialize: JQuery validate CSS Label

[juanlopezdev]

When trying to display Jquery Validation messages are labels the text box is disordered because Materilizecss puts all the labels as absolute. They can fix that problem, that is not so generic.

[acburst]

What validations are you using?

[juanlopezdev]

I use this plugin http://jqueryvalidation.org/

[donksly]

Hi Lopez, having same problem, did u ever find a solution?

[Dogfalo]

Its impractical to change our style so that it tries to fit every validation plugin. Instead we will add some support for validation.

[Clemzd]

It is possible to use jquery-validation with materialize.
I made a little example here : https://jsfiddle.net/rz0zk5u6/2/

[Alfarel]

Hi @Clemzd I would like to know if u have edited materialize.min.css. I was checking your example, but I cant get how did you solved the data-error overlapping display. Thanks.

[philipraets]

I've went with another approach with jquery validate, instead of injecting the error message in the data-error attribute, I create another label element after the label. Then place it with css
example:
http://codepen.io/anon/pen/aOQejJ
this is working with input-fields and textarea's, haven't tried it with checkboxes and switches, but it should be the same idea, just a bit tweaking of the css

[donksly]

thanks alot Clemzd & philipraets

[msonowal]

philipraets m using ur solution in one of my projects thanks it's perfectly working.
but can yo implement in select boxes of materiaze selects or any solutions you have please state it thanks

[syberknight]

@Clemzd

DUDE!!! YOU ROCK!!! i can't thank you enough for that Fiddle (@ https://jsfiddle.net/rz0zk5u6/2) - it saved me! ;-)

i have spent the last 3 days trying to figure out how to make the jquery-validate plugin integrate with materialize. i had finally gotten everything working except that error notification text. (obviously, i'm not a programmer) i've read'n'searched'n'read'n'searched'n'read SSOOOO much to no avail until just now when i found & 'read' this thread.

so basically, just wanted say a huge THANKS!!!
✌🏼

[silverdr]

@Clemzd TNX!

[silverdr]

Its impractical to change our style so that it tries to fit every validation plugin

@Dogfalo - true, yet we don't talk about "every validation plugin". Here we talked about jqueryvalidation.org, which is always the first thing that comes to mind when thinking about 'jQuery' and 'form validation'. Not to mention that it is also the first that comes to google's mind too. You could slim down 'materialise' of validation code and join the 'jqueryvalidation' bandwagon for that purpose. Would be a win-win, IMHO.

[pwill2]

@Clemzd Were you able to get this to work with Select type drop downs? Thanks!

[wahmal]

@Clemzd This not working with datepicker, i think the error label has hidden too with datepicker container.
@Dogfalo Maybe you can move datepicker container append to body ?

[RobRoseKnows]

@Clemzd Are you releasing that fiddle under the same license as materialize?

[multiwebinc]

@wahmal Not sure if you were having the same issue, but I was able to get validation to work with datepickers. See my comment here.

[nefcanto]

Any update on this?