if-empty

Syntax

if-empty: ["]variable|element selector["];

This conditional action will return true if the string variable or element that is evaluated is empty, ie. a string length of zero or has "empty" content.

variable = The variable or variable combination you want to check. This can be any valid Active CSS variable, either an attribute, or an ajax response variable. The variable needs to be existing in the call flow for it to be substituted correctly. Ie. for an ajax response variable, you could use this as a conditional in an afterAjax declaration. Referring to an attribute in a conditional will always grab the attribute from the event selector. Optional double-quotes for readability.

element selector = reference to an element. If the element is an input tag, it will take its value. If it is a textarea tag, it will take its content. Any other type of selector it will check its innerText. When no element is selected at all, it defaults to "self".

This example will return true if the variable ${success} is empty, ie. there is no variable there or if it is an empty string.

@conditional ajaxSuccess {
    if-empty: {success};
}

Ths example will return true if the variable {@data-title} is an empty string or not present. Remember, the attribute in a conditional will always be substituted in from the event selector.

@conditional hasTitle {
    if-empty: {@data-title};
}

When used on an event selector with no variable/element selector in parentheses, it will default to checking "self".

For example:

#myInput:if-empty(self):input {
    console-log: "#myInput is empty";
}

/* is the same as the "self" default, which is simpler... */

#myInput:if-empty:input {
    console-log: "#myInput is empty";
}

if-empty