predefined validation constraints

by trixta

HTML

<script src="https://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<!-- 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>

CSS

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;
}

JavaScript

webshim.setOptions('forms', {
    lazyCustomMessages: true,
    addValidators: true
});

//start polyfilling
webshim.polyfill('forms forms-ext');