0

I'm facing a very weird problem. My error message is not showing

below is my codepen https://codepen.io/cancerian73/pen/eoaYga

 <form data-abide novalidate>
        <div class="search-container">
                  <input type="text" id="seach_again" placeholder="Try once again" aria-required="true" required>
                  <span class="form-error" data-form-error-for="search_again">Amount is required.</span> <span class="form-error"> Valid email required.</span>
                  <input type="submit" class="go-btn" value="GO">
                </div>
      </form>
San
  • 1,237
  • 1
  • 14
  • 29

1 Answers1

1

Your id has a typo in it (seach_again instead of search_again). Though these error messages will work even with the typo because they are adjacent siblings to the input element. I wonder if you did not enable the abide javascript plugin. You need to enable that in addition to the scss.

Aimee
  • 86
  • 6
  • Do I have you add anything new in the CSS? It's not mentioned in the docs – San May 02 '19 at 08:37
  • Actually, it's javascript that makes error messages appear on submit. If you downloaded the complete zipped Foundation, your code should work. I just downloaded the latest version and dropped your code into the index.html and it worked fine. Is it possible you downloaded a custom version that didn't include the abide plugin? Or maybe you are using Foundation's command line compiler and are importing only the parts you use at compile time. – Aimee May 03 '19 at 13:09
  • Thanks for the info, I will check and let you know – San May 13 '19 at 13:50