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

我试图用Materialize CSS设计我的表单，但数据成功和数据错误属性有点尴尬，一切正常，但当textbox wit error失去焦点时，错误消息向下并与表单元素行重叠，如下图所示：

我还创建了一个代码笔来展示这个问题：

$（文档）.ready（函数（）{
$（“#icon#u new#u password，#icon#u password#u confirmation”）.keyup（checkPasswordMatch）；
});
函数checkPasswordMatch（）{
var password=$（“#icon_new_password”）.val（）；
var confirmPassword=$（“#icon#u password_confirmation”）.val（）；
如果（密码！=确认密码）
$（“#图标\新密码”）.attr（“类”，“无效”）；
$（“label[for='icon\u new\u password']”）attr（“class”，“active”）；
$（“#图标\密码\确认”）.attr（“类”，“无效”）；
$（“label[for='icon\u password\u confirmation']”）attr（“class”，“active”）；
}

vpn_密钥
新密码
完成
确认密码

如下更新js代码，并检查错误重叠的差异

$( 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 == ''){
  $("#icon_new_password").attr( "class", "" );
  $("label[for='icon_new_password']").attr( "class", "" );
  $('.error').text('empty');

}
  if(confirmPassword == ''){
  $("#icon_password_confirmation").attr( "class", "" );
  $("label[for='icon_password_confirmation']").attr( "class", "" );        
          }
    if(password !='' && confirmPassword != '' && 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" );
    }
}

---

如下所示更新js代码，并检查错误重叠的差异

$( 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 == ''){
  $("#icon_new_password").attr( "class", "" );
  $("label[for='icon_new_password']").attr( "class", "" );
  $('.error').text('empty');

}
  if(confirmPassword == ''){
  $("#icon_password_confirmation").attr( "class", "" );
  $("label[for='icon_password_confirmation']").attr( "class", "" );        
          }
    if(password !='' && confirmPassword != '' && 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" );
    }
}

---

它对我来说很好，没有任何问题，我认为还有另一种样式覆盖了Materialize样式，你能发布你的自定义css或带有css的html吗？没有自定义css，请检查代码笔。不确定您是如何测试的，但要复制该问题，请输入一个值作为确认密码，单击password文本框并单击back进入确认密码。这对我来说很好，没有问题，我认为还有另一种样式覆盖了Materialize样式，您可以发布自定义css或带有css的html（如果可用）吗？没有自定义css，检查密码笔。不确定您是如何测试的，但要复制此问题，请为“确认密码”输入一个值，单击password文本框，然后单击“返回确认密码”。