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

Posted 2023-02-22

【中文标题】实现 css 自定义错误与其他表单字段重叠

【英文标题】：materialize css custom error overlaps with other form fields

【发布时间】：2017-10-02 14:09:18

【问题描述】：

我尝试使用 Materialise CSS 设置表单的样式，但 data-success 和 data-error 属性有些尴尬，一切正常，但是当文本框机智错误失去焦点时，错误消息会下降并与机智重叠如下图所示的表单元素行：

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

codepen.io/anon/pen/KmvEZM

$(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");

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="input-field col s12">
  <i class="material-icons prefix">***_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>

谢谢。

【问题讨论】：

它对我来说很好用，没有任何问题，我认为还有另一种样式可以覆盖 Materialize 样式，如果可以的话，您可以发布您的自定义 css 或带有 css 的 html 吗？

没有自定义css，查看代码笔。不确定您是如何测试的，但要复制问题，请输入确认密码的值，单击密码文本框，然后单击返回确认密码。

【参考方案1】：

如下更新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" );