title: My form isn't showing the error message correctly
body: <p>I built an online form and published it here --&gt; <a href="https://www.worthit.cc/" rel="nofollow noreferrer">https://www.worthit.cc/</a></p>
  <p>It has a built-in error that's suppose to fire whenever the submit button is clicked and any of the fields are empty. However, it doesn't always show like it's supposed to.</p>
  <p>Here's the link to the full code on GitHub: <a href="https://github.com/ZacharyFoxLuke/Worth-It" rel="nofollow noreferrer">https://github.com/ZacharyFoxLuke/Worth-It</a></p>
  <p>And here's the JS in question:</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>$modal = $('.modal-frame')
  $modal_Rewards_Info = $('#inputFields #rewards-info-message')
  $modal_Transaction_Fee = $('#inputFields #transactionFee-info-message')
  $modal_Profit = $('#profit-message')
  $modal_Loss = $('#loss-message')
  $modal_BreakEven = $('#break-even-message')
  $modal_Error = $('#error-message')
  $modal_About = $('#about-message')
  $modal_Contact = $('#contact-message')
  $submitButton = $('#submitButton')
  $dollarsProfit = $('.dollarsProfit')
  $dollarsFee = $('.dollarsFee')
  $dollarsNet = $('.dollarsNet')
  
  $submitButton.click(function () {
      const purchaseAmount = document.getElementById('purchaseAmountInput').value
      const rewardsRate = document.getElementById('rewardsRateInput').value / 100
      const transactionFeeInput = document.getElementById('variFeeInput').value / 100
      const transactionFeeNet = purchaseAmount * transactionFeeInput
      const earnedRewards = purchaseAmount * rewardsRate
      
      if (purchaseAmount === '' || rewardsRate === '' || transactionFeeInput === '') {
          $modal_Error.toggleClass('active')
          $modal_Error.removeClass('leave')
  
      } else if (rewardsRate === transactionFeeInput &amp;&amp; rewardsRate !== '' &amp;&amp; transactionFeeInput !== '' &amp;&amp; purchaseAmount !== '') {
          $modal_BreakEven.toggleClass('active')
          $modal_BreakEven.removeClass('leave')
          $dollarsProfit.html(rewardsRate * purchaseAmount)
          $dollarsFee.html(transactionFeeNet)
  
      } else if (rewardsRate &lt; transactionFeeInput &amp;&amp; rewardsRate !== '' &amp;&amp; transactionFeeInput !== '' &amp;&amp; purchaseAmount !== '') {
          $modal_Loss.toggleClass('active')
          $modal_Loss.removeClass('leave')
          $dollarsProfit.html(rewardsRate * purchaseAmount)
          $dollarsFee.html(transactionFeeNet)
          $dollarsNet.html(earnedRewards - transactionFeeNet)
  
      } else if (rewardsRate &gt; transactionFeeInput &amp;&amp; rewardsRate !== '' &amp;&amp; transactionFeeInput !== '' &amp;&amp; purchaseAmount !== '') {
          $modal_Profit.toggleClass('active')
          $modal_Profit.removeClass('leave')
          $dollarsProfit.html(rewardsRate * purchaseAmount)
          $dollarsFee.html(transactionFeeNet)
          $dollarsNet.html(earnedRewards - transactionFeeNet)
  
      }
      
  })</code></pre>
  </div>
  </div>
  </p>