“标签”上显示 Jquery 验证错误。如何解决？

Question

我的表单是使用“bootstrap”样式制作的。 为了检查输入字段，我使用“jquery”验证。 带有名称的标签在输入的顶部，当您点击输入时，“标签”移动到“输入”上。 当您单击“下一步”时，错误“验证”出现在带有名称的“标签”顶部，应位于“输入”下方。 如何修复使“标签”移动到“输入”上方而错误位于“输入”下方？ 我的代码

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</script>
 <style type="text/css">
  #step2,#step3,#step4,#step5{
        display: none;
       }

       .form-group label
      {
        position: absolute;
        top: 3px;
        pointer-events: none;
        left: 20px;
        transition: .5s;
      }
       .container .form-group input:focus ~label,
       .container .form-group input:valid ~label
      {
        left: 20px;
        top: -20px;
        color: rgb(66,133,244);
        font-size: 12px;
        font-weight: bold;
      }

  </style>

<script>
$(document).ready(function(e){
$.validator.addMethod("minlenghtname", function (value, element) {
        return /^[a-z]+$/i.test(value);
    }," does not match the format");

$.validator.addMethod("requiredname", function (value, element) {
        return value.length > 2;
    }," fill this field");

 var v = $("#commentForm").validate({
        rules: {
            fname: {
                requiredname: true,
                minlenghtname: true
            },
            lname: {
                requiredname: true,
                minlenghtname: true
            }
        },
        submitHandler: function() {
                alert("Submitted, thanks!");
            }

    })

    $(".next1").click(function() {
            if (v.form()) {
                $("#step2").show();
                $("#step1").hide();
                $("#progressText").html("Step 2 of 4");

            }
      });

});
  </script>
</head>
<body>
<div class="container">
<div id="progressText" style="margin-bottom:20px;">Step 1 of 4</div>
<form class="cmxform" id="commentForm" method="get" action="">
<div id="step1">
      <div class="row">
       <div class="form-group col-md-6 col-sm-6">
       <input class="form-control" id="fname" name="fname" required="">
       <label>First Name:</label>
       </div>  
       <div class="form-group col-md-6 col-sm-6">
        <input class="form-control" id="lname" name="lname" required="">
        <label>Last Name:</label>
       </div>
        <p class="buttonWrapper">
        <input name="formNext1" type="button" class="next1 nextbutton" value="Next" alt="Next" title="Next">
            </p>
 </div>
</div>    
  <div id="step2">
    Next
  </div>
</form>
</div>

</body>
</html>

Answer 1

验证还使用标签来显示错误，因此您最终会为每个字段使用双标签。 来自验证的那些带有error类，因此您可以定位它们并正常显示它：

.form-group label.error {
  position: static;
}

或将其视为该标签但向下移动：

.form-group label.error {
  top: 35px;
}

“标签”上显示 Jquery 验证错误。如何解决？

问题描述

1 个解决方案

解决方案1
2 2020-02-10 21:30:41

“标签”上显示 Jquery 验证错误。 如何解决？

问题描述

1 个解决方案

解决方案1 2 2020-02-10 21:30:41

“标签”上显示 Jquery 验证错误。如何解决？

解决方案1
2 2020-02-10 21:30:41