materialize css自定义错误与其他表单字段重叠

Question

我试图使用Materialise CSS设置我的表单样式，并且数据成功和数据错误属性有点尴尬，一切正常但是当文本框机智错误失去焦点时，错误消息会消失向下并重叠表单元素的行，如下图所示：

我也创建了一个codepen来展示这个问题：

codepen.io/anon/pen/KmvEZM

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#icon_new_password, #icon_password_confirmation").keyup(checkPasswordMatch);
});

function checkPasswordMatch() {
  var password = $("#icon_new_password").val();
  var confirmPassword = $("#icon_password_confirmation").val();

  if (password != confirmPassword)
    $("#icon_new_password").attr("class", "invalid");
  $("label[for='icon_new_password']").attr("class", "active");
  $("#icon_password_confirmation").attr("class", "invalid");
  $("label[for='icon_password_confirmation']").attr("class", "active");
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="input-field col s12">
  <i class="material-icons prefix">vpn_key</i>
  <input id="icon_new_password" pattern=".{0}|^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$" type="password" class="validate" required>
  <label for="icon_new_password" class="" data-error="Please use at least eight characters, one number, one uppercase character and one in lowercase." data-success="That password looks wonderful.">New Password</label>
</div>
<div class="input-field col s12">
  <i class="material-icons prefix">done</i>
  <input id="icon_password_confirmation" type="password" class="validate" required>
  <label for="icon_password_confirmation" class="" data-error="It seems like you made a mistake typing in your password for a second time." data-success="You still remember the password you just typed in. That's great!">Confirm Password</label>
</div>

＆＃13;

＆＃13;

＆＃13;

感谢。