title: How do I access a variable that is in a class inside another class while using Thymeleaf and JavaScript for input validation?
body: <p>I have class Animal:</p>
  <pre><code>@Entity
  public class Animal {
      @Id
      @GeneratedValue(strategy = GenerationType.IDENTITY)
      private long id;
      private String name;
      @Autowired
      private Species species;
      @Autowired
      private Habitat habitat;
      //constructors, getters, setters, unrelated variables omitted 
  </code></pre>
  <p>My Habitat and Species classes:</p>
  <pre><code>    @Embeddable
      public class Habitat {
      private String continent;
      private String biome;
      //constructors, getters, setters omitted 
  
  
      @Embeddable
      public class Species {
      private String commonName;
      private String scientificName;
      //constructors, getters, setters omitted 
  </code></pre>
  <p>My real issue lies in my JavaScript while accessing the Thymeleaf variables. Here is my HTML page:</p>
  <pre><code>   &lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
     &lt;head&gt;
     &lt;meta charset=&quot;ISO-8859-1&quot;&gt;
     &lt;title&gt;Menu&lt;/title&gt;
     &lt;script th:inline=&quot;javascript&quot;&gt;
         var name = /*[[${animal.name}]]*/; // WORKS FINE
         //PROBLEM STARTS HERE
         var commonName = /*[[${animal.species.commonName}]]*/; //DOESN'T WORK
         // var commonName = /*[[${animal.commonName}]]*/; ALSO DOESN'T WORK
  
         var continent = /*[[${animal.habitat.continent}]]*/; //DOESN'T WORK
         //  var continent = /*[[${animal.continent}]]*/; ALSO DOESN'T WORK
  
         //FUNCTION WILL WORK WITHOUT commonName AND continent
         function checkInput() {
             if(name === &quot;&quot; || commonName === &quot;&quot; || continent === &quot;&quot;) {
             alert(&quot;FALSE&quot;);
             return false;
         }
         else {
             alert(&quot;TRUE&quot;);
             return true;
         }
     }
  
     //EVERYTHING ELSE IS FINE
  
     &lt;/script&gt;
  
     &lt;/head&gt;
     &lt;body&gt;
  
     &lt;form th:object=&quot;${animal}&quot; th:action=&quot;@{/inputAnimal}&quot; th:method=&quot;post&quot; th:onsubmit=&quot;return checkInput();&quot;&gt;
  
     Name: &lt;input id=&quot;name&quot; name=&quot;name&quot; size=&quot;20&quot; type=&quot;text&quot;&gt;&lt;br /&gt;
     Species(common): &lt;input id=&quot;commonName&quot; name=&quot;species.commonName&quot; size=&quot;20&quot; type=&quot;text&quot;&gt;&lt;br /&gt;
     Continent: &lt;input id=&quot;continent&quot; name=&quot;habitat.continent&quot; size=&quot;20&quot; type=&quot;text&quot;&gt;&lt;br /&gt;
  
     &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;/&gt;
     &lt;/form&gt;
     &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>
  <p>The &quot;commonName&quot; and &quot;continent&quot; variables are part of a different class but have been accessible thus far. These fields are being added to my database just fine. It's validating their input which is the problem, I believe I am not accessing them correctly in my JS.</p>
  <p>My &quot;name&quot; variable in the JS works great and the form will not be submitted when this field is left blank. However, when I added &quot;commonName&quot; and &quot;continent&quot; in the same manner, running the page on localhost shows up as a blank white page. I believe it's the way I am trying to access the variables from the embedded classes.</p>
  <p>I want to alert the user when they leave these three fields blank. Can someone show me the correct way to do this? Thank you!</p>