<!-- simply add .ws-validate to your form and you get nice inline form validation --> <form action="#" class="ws-validate"> <div class="form-row"> <input type="password" placeholder="password" id="password" required="" /> <br /> <input data-dependent-validation="password" type="password" placeholder="repeat password" /> </div> <div class="form-row"> <!-- if checkbox is checked, the field is required --> <input type="checkbox" id="checkbox" /> <br /> <input data-dependent-validation='{"from": "checkbox", "prop": "required"}' placeholder="required if checkbox is checked" /> </div> <div class="form-row"> <!-- max of the first date equals value of the second --> <!-- mmin of the second date equals value of the first --> <input data-dependent-validation='{"from": "date-to", "prop": "max"}' type="date" id="date-from" placeholder="from" /> <br /> <input data-dependent-validation='{"from": "date-from", "prop": "min"}' type="date" id="date-to" placeholder="to" /> </div> <div class="form-row"> <!-- if checkbox is checked, the fieldset is disabled --> <label><input type="checkbox" id="fieldset-checkbox" /> controls disabled state of a fieldset</label> </div> <fieldset data-dependent-validation="fieldset-checkbox"><div class="form-row"> <!-- max of the first date equals value of the second --> <!-- mmin of the second date equals value of the first --> <input type="email" placeholder="required email" required="" /> <br /> <input type="text" placeholder="required text" required="" /> </div> </fieldset> <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; } [disabled] p.ws-errormessage { color: #ccc; } [disabled] div.ws-invalid input { border-color: #ccc; } 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; }