Materialize: error display with jquery validate, textbox and select

[rebeccamarye]

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?

[DigiTechs]

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.

[acburst]

can you post a codepen so its easier for us to debug?

[rebeccamarye]

@DigiTechs css helped with the display issue (thanks!), but the select is still opening on validation. Here's a jsfiddle: http://jsfiddle.net/ce208m4L/

[iammary]

I am having the same issue with the select validation on angularjs. It seems that the input validation works correctly but the added element select-wrapper for view is not updating the validation classes.

[fayazara]

Hey, I see you have used Jquery Vallidation Plugin!! I've been trying to use this, But it wont validate!! Can you guys help?

[gubi]

I have the same problem

[rhuanbarreto]

This solves all problems!

$("select[required]").css({display: "inline", height: 0, padding: 0, width: 0});

[rprimora]

I just want to add that if you include length attribute then after the validation occurs the control that had focus will gain it again which will result in validation removal. This is happening with v0.97.5

[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.

[FabricioLugao]

I think you should change your HTML markup:
https://jsfiddle.net/vnsb4udk/5/

[sheeput]

@FabricioLugao - How come the validation doesn't work on the first_name? This is a problem I've run into. One field works just fine but it seems like it ignores other "required" fields.

[Dogfalo]

This issue should be resolved in the more recent versions, The demo by @FabricioLugao shows the layout on select working correctly.