title: How do I Validate my form using Javascript without using alert?
body: <p><strong>The question is this-</strong>
  <em>Create Home Page With button “Book Appointment” ,once click button following component of page should be shown.</em>
  <a href="https://i.stack.imgur.com/mZwHo.png" rel="nofollow noreferrer">The form should look like this</a></p>
  <p><a href="https://i.stack.imgur.com/HzTpf.png" rel="nofollow noreferrer">After submitting form only thankyou section should appear </a></p>
  <p><em>Do page validation once click on submit button. Once click on submit button Thank You component of page should be shown on screen. Only single page should be present.</em></p>
  <p>This is my code:-</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
          function booking() {
              const form = document.querySelector('#signup');
              form.style.display = 'block';
              document.querySelector('#b1').style.display = 'none';
          }
          function validateForm() {
              let mobile = document.querySelector("#mobile")
              let name = document.querySelector("#name")
              let pdate = document.querySelector("#pdate")
              let timeslot = document.querySelector("#TimeSlot")
              let language = document.querySelector("#language")
  
  
              while (mobile.value == "") {
                  document.getElementById("mobile").textContent = "*Please enter mobile no.";
                  mobile.focus();
                  return false;
              }
              while (name.value == "") {
                  document.getElementById("name").innerHTML = "*Please enter your name.";
                  name.focus();
                  return false;
              }
              while (pdate.value == "") {
                  alert("Please Select Date.");
                  pdate.focus();
                  return false;
              }
              while (timeslot.value == "") {
                  alert("Please Select One.");
                  timeslot.focus();
                  return false;
              }
              while (language.value == "") {
                  alert("Please Select One.");
                  language.focus();
                  return false;
              }
              return true;
          }
          function submit() {
              const thanks = document.querySelector('#thanks');
              thanks.style.display = 'block';
              document.querySelector('#signup').style.display = 'none';
          }
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
          body {
              font-family: Verdana, Geneva, Tahoma, sans-serif;
              align-items: center;
              justify-content: center;
          }
  
          #signup,
          #thanks {
              display: none;
          }
  
          button {
              background-color: lightgreen;
              border-radius: .25em;
          }
  
          div,
          h1 {
              text-align: center;
          }
  
          span {
              color: red;
          }
  
          #b1 {
              background-color: lightskyblue;
          }
      &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html language="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Book Appointment&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;button onclick="booking()" id="b1"&gt;Book Appointment&lt;/button&gt;
      &lt;br&gt;
      &lt;div id="signup"&gt;
          &lt;h1&gt;Schedule Your Free Tele-Consultation&lt;/h1&gt;
          &lt;hr&gt;
          &lt;label for="mobile"&gt;
              &lt;h3&gt;Registered Mobile Number &lt;span&gt;*&lt;/span&gt;&lt;/h3&gt;
          &lt;/label&gt;
          &lt;input type="tel" name="mobile" id="mobile" size="10" required&gt;
          &lt;br&gt;
          &lt;label for="name"&gt;
              &lt;h3&gt;Name &lt;span&gt;*&lt;/span&gt;&lt;/h3&gt;
          &lt;/label&gt;
          &lt;input type="text" name="name" id="name" required&gt;
          &lt;br&gt;
          &lt;label for="pdate"&gt;
              &lt;h3&gt;Preferred Date &lt;span&gt;*&lt;/span&gt;&lt;/h3&gt;
          &lt;/label&gt;
          &lt;input type="date" placeholder="dd-mm-yy" name="pdate" id="pdate" required&gt;
  
          &lt;br&gt;
          &lt;label for="TimeSlot"&gt;
              &lt;h3&gt;Preferred Time Slot &lt;span&gt;*&lt;/span&gt;&lt;/h3&gt;
          &lt;/label&gt;
          &lt;select name="TimeSlot" id="TimeSlot" required&gt;
              &lt;option value=""&gt;Select Time Slot&lt;/option&gt;
              &lt;option value="10 AM to 12 PM"&gt;10 AM to 12 PM&lt;/option&gt;
              &lt;option value="2 PM to 4 PM"&gt;2 PM to 4 PM&lt;/option&gt;
              &lt;option value="4 PM to 6 PM"&gt;4 PM to 6 PM&lt;/option&gt;
          &lt;/select&gt;
          &lt;br&gt;
          &lt;label for="language"&gt;
              &lt;h3&gt;Preferred Language &lt;span&gt;*&lt;/span&gt;&lt;/h3&gt;
          &lt;/label&gt;
          &lt;select name="language" id="language" required&gt;
              &lt;option value=""&gt;Select your Language&lt;/option&gt;
              &lt;option value="Hindi"&gt;Hindi&lt;/option&gt;
              &lt;option value="English"&gt;English&lt;/option&gt;
          &lt;/select&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;button type="button" onclick="let bool = validateForm(); if(bool === true) submit();"&gt;
              Submit&lt;/button&gt;
  
      &lt;/div&gt;
      &lt;h1 id="thanks"&gt;
          Thank you! Your response has been submitted.
      &lt;/h1&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have used alert to validate here but I thought of using innerText or textContent to show error but it isn't working. It just focuses on the element but doesn't show the error. I have not used form element here because it submits the form and reloads but but I want to show the section of Thank you.
  This HandsOn was given by our Ma'am and she told us to use innerText to show the error with &quot;*&quot; symbol but I don't think we can do this way, If somebody comes up with something Please do share!</p>