Materialize: Textarea validation

Created on 14 Apr 2016 · 10Comments · Source: Dogfalo/materialize

How to enable validation for textarea? In single input all is working well but on textarea there is no validation.
Bug?

docs

Source

adrianratajczak

👍5

Most helpful comment

@djake 's comment worked for me. Add a class="validate" to your textarea tag. For some reason, class="validate" is already in the demo code for input tags but not in the textarea tags. Their documentation should be updated.

darrylmendonez on 2 May 2017

🎉2

All 10 comments

What kind of validation are you expecting?

Dogfalo on 1 May 2016

screen shot 2016-08-18 at 10 10 22 am

gizm0bill on 18 Aug 2016

Try adding a validate class to the textarea. I am only able to get this to trigger the default browser validation when the required attribute is present. The data-error attribute is not respected, if I manually inject the valid or invalid css classes, the formatting is all off. Not sure if this is a bug or just needs to be clarified that the docs, or if I'm doing something wrong.

For example:

<html>
<head>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

</head>

<body>
  <!-- Compiled and minified JavaScript -->
    <p>This is a test.</p>
    <form>
<div class="row">
    <div class="input-field col s12">
        <textarea
            class="materialize-textarea validate"
            name="test_textarea"
            placeholder="Write valid stuff"
            required></textarea>
            <label for="test_textarea" data-error="An error has occurred.">Test label</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input type="text" pattern="(only|valid|text)" class="validate"/>
        <label for name="text_test" data-error="An error has occurred.">Text field label</label>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
    </body>
    </html>

djake on 16 Sep 2016

🎉2

I have the same issue. I'm going to check the code to see if I can add this functionality.

Gorzas on 2 Nov 2016

Same issue here :)

AlexandreBeauduin on 10 Feb 2017

Issue is still present

zilions on 28 Mar 2017

darrylmendonez on 2 May 2017

🎉2

@djake's comment only partially fixes it or put another way it introduces another issue. Please take a look at the example. Without class="validate" on textarea it looks nice but breaks when typing in additional lines.

With class="validate" on textarea it changes css rules and transform: scale(0.8) does not apply to it anymore so the font is bigger than other input fields and which breaks the common look principle. And also it makes me lose control of the line color as the line then becomes green on it's own when you input text in which is not always desired.

https://codepen.io/pingec/pen/qPqVra

If my conclusion is correct it should be marked as a bug.

pingec on 24 Sep 2017

I haven't dug into the source code of Materialize yet, and I don't know if I will, but I threw together a quick fix in the Sass of my website - maybe it'll help someone?

textarea.materialize-textarea.validate + label:not(.label-icon).active {
    transform: scale(0.8) translateY(-25px);

    &::after {
        transform: translateY(36px);
    }
}

It doesn't quite solve the issue that @pingec mentioned where if the textarea is invalid and is also expanded, then the scaling will cause the error message to appear higher than it should - I assume this is the reason that the developers chose to leave it without scaling in the first place.