creating error labels like jquery validate after server side validation

Question

I am returning a JSON from my validation CFC, which contains an array of fields that were found to be in error.

{"error":1,"fields":["first_name","email","last_name","comments"]}

I am using the jquery post method, but when I get the data returned, I cannot create the labels based on the fields in the json.

$.each(data.fields, function(){
    $("#" + this + "\"").append("<label class='error' for='" + this + "'>Please check your input</label>")

But this doesn't appear to work. What am I doing wrong?

Also, I am using jquery validation plugin, but I am required to use server side validation as well. I have disabled the validator.

pete · Accepted Answer · 2013-07-05 21:22:53Z

1

You're adding a backslash (\) to your selector which will make your selector fail. Remove the backslash (i.e., $("#" + this)) and it should work.

On another note, the jQuery Validation plugin uses the name attribute for validation, not the id attribute, so unless your server-side validation is returning the id attribute you're going to want to use a selector that targets the name attribute instead.

var selector = 'input[name="' + this + '"], textarea[name="' + this + '"]',
    field = $(selector);
field.after($('<label />').attr('for', field.attr('id')).addClass('error').text('Please check your input'));

Or use this to target the id attribute:

var selector = '#' + this,
    field = $(selector);
$(selector).after($('<label />').attr('for', field.attr('id')).addClass('error').text('Please check your input'));

Here's a fiddle showing it in action: http://jsfiddle.net/aHLgw/

Finally, while there's technically nothing wrong with using the this keyword, it would be a better practice to use the key and value parameters as it will more clearly indicate to others who may have to maintain the code you write that you are iterating through an object or an array, instead of a DOM Element Collection.

answered Jul 5, 2013 at 21:22

pete

25.2k4 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob M Over a year ago

Thanks, this works exactly as intended. I have always struggled with variables as jQuery selectors. I have also changed it to use the name attribute, because the name and id are the same, and I have changed it to use the key/value pairing as well. Thank you.

krishwader · Accepted Answer · 2013-07-06 05:15:35Z

1

Two things :

You need to pass two parameters to each. this will return a string of arrays. So, consider I'm logging this and the parameters passed to each.
```
$.each(data.fields, function (key, value) {
  console.log("when this is used - a string array: ",this);
  console.log("value (parameter passed to each) is used - string : ", value);
});
```
Here's the console output for the following code (when "comments" string is in scope)

More info at docs : http://api.jquery.com/each/

$("#" + value + "\"") won't work here. Just $("#" + value) would do.

$.each(data.fields, function (key, value) {
   $("#" + value).append("<label class='error' for='" + value + "'>Please check your input</label>")
});

Hope this helps!

edited Jul 6, 2013 at 5:15

answered Jul 5, 2013 at 18:59

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

Comments

kunal18 · Accepted Answer · 2013-07-05 19:11:54Z

-1

Use this.text(), that will return the actual value of the elements or use a callback function as told by hungerpain above.

answered Jul 5, 2013 at 19:11

kunal18

1,9265 gold badges33 silver badges58 bronze badges

Collectives™ on Stack Overflow

creating error labels like jquery validate after server side validation

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related