title: How to add error message in html on button click
body: <p>I intend to have the error message shown in red as displayed in the picture shown when login button is clicked. <a href="https://i.stack.imgur.com/djPh6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/djPh6.png" alt="enter image description here" /></a></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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;meta http-equiv="content-type" content="text/html;charset=UTF-8" /&gt;
      &lt;head&gt;
          &lt;title&gt;Login V14&lt;/title&gt;
          &lt;form class="login100-form validate-form flex-sb flex-w" action="" method="post"&gt;
              &lt;span class="login100-form-title p-b-32"&gt;
              Account Login
              &lt;/span&gt;
              &lt;span class="txt1 p-b-11"&gt;
              Username
              &lt;/span&gt;
              &lt;div class="wrap-input100 validate-input m-b-36" data-validate="Username is required"&gt;
                  &lt;input class="input100" type="text" name="username"&gt;
                  &lt;span class="focus-input100"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;span class="txt1 p-b-11"&gt;
              Password
              &lt;/span&gt;
              &lt;div class="wrap-input100 validate-input m-b-12" data-validate="Password is required"&gt;
                  &lt;span class="btn-show-pass"&gt;
                  &lt;i class="fa fa-eye"&gt;&lt;/i&gt;
                  &lt;/span&gt;
                  &lt;input class="input100" type="password" name="pass"&gt;
                  &lt;span class="focus-input100"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="flex-sb-m w-full p-b-48"&gt;
                  &lt;div class="contact100-form-checkbox"&gt;
                      &lt;input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me"&gt;
                      &lt;label class="label-checkbox100" for="ckb1"&gt;
                      Remember me
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;&lt;br&gt;
              &lt;div class="container-login100-form-btn"&gt;
                  &lt;button class="login100-form-btn" type="submit"&gt;
                  Login
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="dropDownSelect1"&gt;&lt;/div&gt;
          &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>