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

Question

My form is made using the “bootstrap” styles.我的表单是使用“bootstrap”样式制作的。 To check for input fields, I use “jquery” validation.为了检查输入字段，我使用“jquery”验证。 Label with the name is on top of input, when you click on input, “label” moves over “input”.带有名称的标签在输入的顶部，当您点击输入时，“标签”移动到“输入”上。 When you click “Next”, the error “validation” appears on top of the “label” with the name, and should be located under the “input”.当您单击“下一步”时，错误“验证”出现在带有名称的“标签”顶部，应位于“输入”下方。 How to fix so that “label” moves above “input” and the error is below “input”?如何修复使“标签”移动到“输入”上方而错误位于“输入”下方？ my code我的代码

<!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

Validation also uses labels to show errors so you end up with double label for each field.验证还使用标签来显示错误，因此您最终会为每个字段使用双标签。 Those from validation come with error class, so you can target them and either show it normally:来自验证的那些带有error类，因此您可以定位它们并正常显示它：

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

or treat it like that label but move down:或将其视为该标签但向下移动：

.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