error display with jquery validate, textbox and select

I’m seeing a strange issue with error display when there’s a select box on the page. I’m using materializecss 0.97.0 and jquery.validate in an asp.net mvc app.

If I don’t touch the select, everything displays fine on validation:

But as soon as I touch the select, the error displays incorrectly, and the select opens (even though it has no errors);

I don’t think there’s anything tricky in my code:

    <form id="testForm">
        <div class="input-field row">
            <input id="last_name" type="text" class="validate" required>
            <label class="" for="last_name">Last Name</label>
        </div>
        <div class="input-field row">
            <input id="first_name" type="text" class="validate" required>
            <label class="" for="first_name">First Name</label>
        </div>
        @Html.Partial("_LocationPartial")
        <input class="submit" type="submit" value="Submit">
    </form>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/materialize/materialize.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script>
    $.validator.setDefaults({
        errorClass: 'invalid',
        errorPlacement: function (error, element) {
            element.next("label").attr("data-error", error.contents().text());
        }
    });
    $('select').material_select();
    $('form').validate();
</script>

But I’m obviously doing something dumb, because this seems to obvious a problem for someone not to have run across it already.

Any ideas?

[juaneks]

I’m from Ecuador, my English is not so good. About your problem, you have to add the name attribute to the input to work!! input id=“first_name” name=“first_name” Saludos.

[ghost]

I applied some CSS and it appears to be working now, but I don’t know if this can be improved or not:

label:after {
    transition-property: all !important;
    font-size: 0.8rem;
    transform: none;
}
label:not(.active):after {
    transform: translateY(-140%);
}

Essentially, the error message is just transitioned back to where it should be when the textbox is triggered.

Another option would be to ‘force’ the “active” class on elements with errors, but I couldn’t quickly come up with a clean way to do this.