<!-- simply add .ws-validate to your form and you get nice inline form validation --> <form action="#" class="ws-validate"> <div class="form-row"> <div> <input type="password" placeholder="password" id="password" required="" /> </div> <!-- using the data-errormessage[errortype] --> <div> <input data-dependent-validation="password" type="password" placeholder="repeat password" data-errormessage-dependent="you have to confirm your password!" /> </div> </div> <div class="form-row"> <div> <input type="password" placeholder="password" id="password2" required="" /> </div> <!-- using the ival feature --> <div> <input data-dependent-validation="password2" type="password" placeholder="repeat password" required="" /> <div class="ws-errorbox" hidden=""> <p data-errortype="dependent">you have to confirm your password!</p> </div> </div> </div> <div class="form-row"> <input type="submit" /> </div> </form>
webshim.setOptions('forms', { lazyCustomMessages: true, addValidators: true }); //start polyfilling webshim.polyfill('forms forms-ext');
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; margin: 5px 0; } label { display: block; margin: 3px 0; } .form-row input { width: 220px; padding: 3px 1px; border: 1px solid #ccc; box-shadow: none; } .form-row input[type="checkbox"] { width: 15px; } }