簡體   English   中英

“標簽”上顯示 Jquery 驗證錯誤。 如何解決?

[英]Jquery validation error displayed on "label". How to fix it?

我的表單是使用“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>

驗證還使用標簽來顯示錯誤,因此您最終會為每個字段使用雙標簽。 來自驗證的那些帶有error類,因此您可以定位它們並正常顯示它:

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

或將其視為該標簽但向下移動:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM