Jquery驗證自定義錯誤消息位置

Question

這看起來很簡單，但我無法弄清楚。我正在使用jquery validate插件。我試圖驗證<input name=first>和<input name=second>輸出錯誤信息到：

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

我已經開始寫errorPlacement：這是您自定義錯誤消息的位置。

如何將錯誤消息放入那些<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

你應該用的是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>

---

如果你想保留您的結構，那麼

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

您可以簡單地創建符合您在同樣的功能需要的字段這額外的條件。例如，使用上面的代碼...

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

希望幫助！

Answer 3

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

嘗試錯誤對象的這種獲取文本