ejemplo - Jquery Validar ubicación de mensaje de error personalizado

prop jquery

Question

Esto parece muy simple, pero no puedo entenderlo. Estoy usando el plugin de validación jquery. Estoy tratando de validar <input name=first> y <input name=second> para generar los mensajes de error en:

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

Ya empecé a escribir el errorPlacement: que es donde personaliza la ubicación de su mensaje de error.

¿Cómo puedo poner el mensaje de error en esos <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

Lo que debes usar es el 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>

Si quieres conservar tu estructura entonces

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

Simplemente puede crear condiciones adicionales que coincidan con los campos que necesita en la misma función. Por ejemplo, usando tu código de arriba ...

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

¡Espero que ayude!

Answer 3

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

Intenta esto obtener texto de error objeto