Menu icon Foundation
Form validation

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>
            

         

form validation

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>
            

         
Dennis Kayser over 5 years ago

Remove
novalidate="novalidate"

from you form element. It is a HTML5 property that disables form validation when submitting.

http://www.w3schools.com/tags/att_form_novalidate.asp

You can follow the tutorial here to learn more about Foundation 5 forms: http://foundation.zurb.com/docs/components/forms.html