Concatenate attribute selector with variable does a syntax error

Question

This code works, the class is added, but I am receiving an error.

console.log(key);    //first_date
$('*[name='+key+']').addClass('error');

ERROR:

Uncaught Error: Syntax error, unrecognized expression: `*[name=]`

What is wrong here?

<input id="date-picker-1" type="text" class="date-picker form-control hasDatepicker" name="first_date">

Answer 1

The error is happening because your key variable is empty. '*[name='+key+']' is evaluating to '*[name=]'. To avoid the error, you can wrap your key variable in quotes:

$('*[name="'+key+'"]').addClass('error');

This way you will not get the error as instead of trying to evaluate *[name=] it will try to evaluate *[name=""]. However as your key variable appears to be empty, this will probably not produce the result you're looking for.

Double check your code to ensure key is set prior to addClass being called.

---

In fact, if what you say is true that the "error" class is added, I imagine your code here is being executed twice - once when key is empty, and again when key is in fact equal to "first_date".