Jquery Xác thực vị trí thông báo lỗi tùy chỉnh

Question

Điều này có vẻ rất đơn giản, nhưng tôi không thể tìm ra. Tôi đang sử dụng plugin xác thực jquery. Tôi đang cố gắng để xác nhận <input name=first> và <input name=second> để đầu ra các thông báo lỗi vào:

<span id="errNm2"></span> <span id="errNm1"></span> 

Tôi đã bắt đầu viết những errorPlacement: đó là nơi bạn tùy chỉnh vị trí thông báo lỗi của bạn.

Tôi làm cách nào để đưa thông báo lỗi vào các số <span>?

$(document).ready(function() { 
    $('#form').validate({ 
     errorPlacement: function(error, element) { 
      error.append($('.errorTxt span')); 
     }, 
     rules, 
}); 

<input type="text" name="first"/> 
<input type="text" name="second"/> 

<div class="errorTxt"> 
    <span id="errNm2"></span> 
    <span id="errNm1"></span> 
</div> 

Answer 1

Những gì bạn nên sử dụng là errorLabelContainer

jQuery(function($) { 
 
    var validator = $('#form').validate({ 
 
    rules: { 
 
     first: { 
 
     required: true 
 
     }, 
 
     second: { 
 
     required: true 
 
     } 
 
    }, 
 
    messages: {}, 
 
    errorElement : 'div', 
 
    errorLabelContainer: '.errorTxt' 
 
    }); 
 
});

.errorTxt{ 
 
    border: 1px solid red; 
 
    min-height: 20px; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> 
 

 
<form id="form" method="post" action=""> 
 
    <input type="text" name="first" /> 
 
    <input type="text" name="second" /> 
 
    <div class="errorTxt"></div> 
 
    <input type="submit" class="button" value="Submit" /> 
 
</form>

---

Nếu bạn muốn giữ lại cấu trúc của bạn sau đó

jQuery(function($) { 
 
    var validator = $('#form').validate({ 
 
    rules: { 
 
     first: { 
 
     required: true 
 
     }, 
 
     second: { 
 
     required: true 
 
     } 
 
    }, 
 
    messages: {}, 
 
    errorPlacement: function(error, element) { 
 
     var placement = $(element).data('error'); 
 
     if (placement) { 
 
     $(placement).append(error) 
 
     } else { 
 
     error.insertAfter(element); 
 
     } 
 
    } 
 
    }); 
 
});

#errNm1 { 
 
    border: 1px solid red; 
 
} 
 
#errNm2 { 
 
    border: 1px solid green; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> 
 

 
<form id="form" method="post" action=""> 
 
    <input type="text" name="first" data-error="#errNm1" /> 
 
    <input type="text" name="second" data-error="#errNm2" /> 
 
    <div class="errorTxt"> 
 
    <span id="errNm2"></span> 
 
    <span id="errNm1"></span> 
 
    </div> 
 
    <input type="submit" class="button" value="Submit" /> 
 
</form>

Answer 2

Bạn chỉ có thể tạo điều kiện phụ trợ phù hợp với lĩnh vực bạn yêu cầu trong chức năng tương tự. Ví dụ, sử dụng mã của bạn ở trên ...

$(document).ready(function() { 
    $('#form').validate({ 
     errorPlacement: function(error, element) { 
      //Custom position: first name 
      if (element.attr("name") == "first") { 
       $("#errNm1").text(error); 
      } 
      //Custom position: second name 
      else if (element.attr("name") == "second") { 
       $("#errNm2").text(error); 
      } 
      // Default position: if no match is met (other fields) 
      else { 
       error.append($('.errorTxt span')); 
      } 
     }, 
     rules 
}); 

Hy vọng rằng sẽ giúp!

Answer 3

if (e.attr("name") == "firstName") { 
    $("#firstName__validate").text($(error).text()); 
    console.log($(error).html()); 
} 

Hãy thử điều này có được văn bản của đối tượng lỗi