Menu icon Foundation
Form

I am very new to Foundation, but I love everything about it. I am just working on some simple form validation and I can't seem to get the proper text to come up on the error message. Any help would be greatly appreciated.

<div id="myModal" class="reveal-modal" data-reveal>
    <h2>Please fill out the form below</h2>
    <form data-abide novalidate="novalidate">
        <div class="name-field"> <label>Your name <small>required</small> <input type="text" required pattern="[a-zA-Z]+">
        </label> <small class="error" data-error-message="">Name is required and must be a string.</small>
        </div>
        <div class="email-field"> <label>Email <small>required</small> <input type="email" required> </label> <small class="error">Please enter proper email address.</small> </div>
        <button type="submit">Submit</button> </form>
    <a class="close-reveal-modal">&#215;</a>

</div>
            

         

formabidevalidation

I am very new to Foundation, but I love everything about it. I am just working on some simple form validation and I can't seem to get the proper text to come up on the error message. Any help would be greatly appreciated.

<div id="myModal" class="reveal-modal" data-reveal>
    <h2>Please fill out the form below</h2>
    <form data-abide novalidate="novalidate">
        <div class="name-field"> <label>Your name <small>required</small> <input type="text" required pattern="[a-zA-Z]+">
        </label> <small class="error" data-error-message="">Name is required and must be a string.</small>
        </div>
        <div class="email-field"> <label>Email <small>required</small> <input type="email" required> </label> <small class="error">Please enter proper email address.</small> </div>
        <button type="submit">Submit</button> </form>
    <a class="close-reveal-modal">&#215;</a>

</div>
            

         
Wing-Hou Chan over 5 years ago

Hey Walker!

Could you elaborate on the problem? Maybe screenshots or give a more detailed description? This will help us target the problem itself so we can fix it and stop me giving random suggestions for you to implement like I am going to do:

Check you have the JS components added. In particular: foundation.min.js OR foundation.js AND foundation.abide.js.

After checking if the JS components are added, double check the paths.

The markup you have given above seems good.