user1427307 user1427307 - 3 months ago 10
jQuery Question

Trying to make jquery validation errors get added dynamically, why isn't this code working?

I'm using the following code to try and dynamically add the error labels and not have to use so many if else statements but it doesn't seem to work, any help appreciated :)

This works:

errorPlacement: function(error, element) {

if (element.attr("name") == "site" )
error.insertAfter("div#siteerror");
else if (element.attr("name") == "name" )
error.insertAfter("div#nameerror");
else if (element.attr("name") == "email" )
error.insertAfter("div#emailerror");
else if (element.attr("name") == "password" )
error.insertAfter("div#passworderror");
else if (element.attr("name") == "headerimage" )
error.insertAfter("div#headerimageerror");
else if (element.attr("name") == "header1" )
error.insertAfter("div#header1error");
else if (element.attr("name") == "header2" )
error.insertAfter("div#header2error");
else if (element.attr("name") == "headerfont" )
error.insertAfter("div#headerfonterror");
else if (element.attr("name") == "menucolor" )
error.insertAfter("div#menucolorerror");
else if (element.attr("name") == "menufontcolor" )
error.insertAfter("div#menufontcolorerror");
else if (element.attr("name") == "menufont" )
error.insertAfter("div#menufonterror");
else if (element.attr("name") == "backgroundcolor" )
error.insertAfter("div#backgroundcolorerror");
else if (element.attr("name") == "sitefontcolor" )
error.insertAfter("div#sitefontcolorerror");
else if (element.attr("name") == "sitefont" )
error.insertAfter("div#sitefonterror");
else if (element.attr("name") == "galleryimages" )
error.insertAfter("div#galleryimageserror");
else
error.insertAfter(element);
},


but this doesn't:

errorPlacement: function(error, element) {
var $inputs = $('input');
$inputs.each(function(){
var name = $(this).attr('name');
var errorname = ('"div#' + name + 'error"')
if (name === name) {
console.log("name: " + name + " " + "errorname: " + errorname);
error.insertAfter($($.parseHTML(errorname)));
console.log("name matches!");
} else {
error.insertAfter(element);
}
});
},


it returns all of the correct values but for some reason just won't work, any ideas?

Answer

The developer has given you the element argument which represents the element being validated.

var name = $(element).attr('name');

Since errorPlacement deals with each element as it's being validated, you do not need the .each() loop, and the element argument will work for each one already.

You messed up your quotation marks here, missed a semicolon, and you don't need the parenthesis...

var errorname = ('"div#' + name + 'error"')

This works instead...

var errorname = 'div#' + name + 'error';

If you're trying to insert the error message into a specific div...

$(errorname).html(error);

if (name === name) is also totally pointless, because there will never be a scenario where it's not equal to itself.

DEMO: jsfiddle.net/rttLsoxL/

Final:

errorPlacement: function(error, element) {
    var name = $(element).attr('name');
    var errorname = 'div#' + name + 'error';
    console.log("name: " + name + " " + "errorname: " + errorname);
    $(errorname).html(error);
},