changing way we handle empty form submission attempts; required attribute is behaving oddly

Author: chrisdavidmills

overscroll-behavior/index.html

@@ -27,7 +27,7 @@ <h2>Active chat</h2>
         <p class="you">Bob: Cool, where can I learn more?</p>
       </div>
       <form>
-        <input type="text" aria-label="Enter your chat message here" required autofocus>
+        <input type="text" aria-label="Enter your chat message here" autofocus>
         <button>Send</button>
       </form>
     </section>

overscroll-behavior/main.js

@@ -22,13 +22,15 @@ messages.scrollTop = messages.scrollHeight;
 form.addEventListener('submit', e => {
   e.preventDefault();
 
-  let pElem = document.createElement('p');
-  pElem.setAttribute('class', 'me');
-  pElem.textContent = 'Chris: ' + input.value;
+  if(input.value !== '') {
+    let pElem = document.createElement('p');
+    pElem.setAttribute('class', 'me');
+    pElem.textContent = 'Chris: ' + input.value;
 
-  messages.appendChild(pElem);
-  messages.scrollTop = messages.scrollHeight;
+    messages.appendChild(pElem);
+    messages.scrollTop = messages.scrollHeight;
 
-  input.value = '';
-  input.focus();
+    input.value = '';
+    input.focus();
+  }
 });