<!-- simply add .ws-validate to your form and you get nice inline form validation --> <form action="#" class="ws-validate"> <div class="form-row"> <label for="email">email with one message</label> <input required="" type="email" id="email" pattern=".+\.[a-zA-Z]{2,}" /> <!-- define one errormessage --> <div class="ws-errorbox" hidden=""> <p>Please enter your email.</p> </div> </div> <div class="form-row"> <label for="email2">email with two messages</label> <input required="" type="email" pattern=".+\.[a-zA-Z]{2,}" id="email2" /> <!-- define errormessage --> <div class="ws-errorbox" hidden=""> <!-- define one errormessage for the valueMissing errortype --> <p data-errortype="valueMissing">Please enter your email.</p> <!-- and one other for all other errotypes (i.e. typeMismatch and patternMismatch) --> <p>This is not a valid email.</p> </div> </div> <div class="form-row"> <input type="submit" /> </div> </form>
webshim.setOptions('forms', { lazyCustomMessages: true }); //start polyfilling webshim.polyfill('forms');
div.ws-invalid input { border-color: #c88; } .ws-invalid label { color: #933; } div.ws-success input { border-color: #8c8; } form { margin: 10px auto; max-width: 400px; min-width: 220px; } .form-row { padding: 5px 10px; } label { display: block; margin: 3px 0; } .form-row input { width: 220px; padding: 3px 1px; border: 1px solid #ccc; box-shadow: none; }