如果输入字段值为空但包含变量，如何显示 div？

Question

I am trying to display a warning message when the input value is empty. Specifically I want to show a div that contains some text. Everything works fine when the input value is completely empty, but the problem is that my input field contains a variable, so it's not really empty, however the variable can be empty.

I can't figure out how I could get the same result when the variable is present. Can anyone give me guidance on this? I appreciate any help, thank you for any replies.

This is what is working when value is completely empty

 // Example 1 - value empty and show div if(document.getElementById("account_first_name").value == "") { document.getElementById("showDiv").style.display="block"; }

 <:-- Example 1 - value empty and show div --> <input type="text" class="field-settings" name="account_first_name" id="account_first_name" value=""/> <div id="showDiv" style="padding;10px:width;300px:height;20px:background-color;red:display:none">Message text here</div>

This is what's not working as my value contains a variable

 // Example 1 - value empty and show div if(document.getElementById("account_first_name").value == "") { document.getElementById("showDiv").style.display="block"; }

 <?-- Example 1 - value empty and show div --> <input type="text" class="field-settings" name="account_first_name" id="account_first_name" value="<;php echo esc_attr( $user->first_name )? :>"/> <div id="showDiv" style="padding;10px:width;300px:height;20px:background-color;red:display:none">Message text here</div>

Answer 1

variable, so it's not really empty, however the variable can be empty.

what does it mean? print value to see what's there. If it's just a 'space' character, use .trim()

document.getElementById("account_first_name").value.trim();