WinJSContrib.DataForm (NuGet package)

This package contains a set of CSS and javascript to help manage data forms with integrated validation mecanisms.

The validation logic rely on jQuery validate (for validation) and tooltipster (for showing error tooltips)

Please be aware that this package is still a work in progress.

To use this control, reference the javascript and css, and declare it in your page or in default.html
<script src="/scripts/jquery.validate.js"></script>
<script src="/scripts/tooltipster/jquery.tooltipster.js"></script>
<script src="/scripts/winjscontrib/mcnext.ui.dataform.js"></script>
<link href="/scripts/tooltipster/tooltipster.css" rel="stylesheet" />
<link href="/css/winjscontrib/mcnext.ui.dataform.css" rel="stylesheet" />

The DataForm control must be attached to a form element.

Here is an example :
<form id="formHorizontal" class="mcn-dataform form-horizontal label140" data-win-control="MCNEXT.UI.DataForm">
    <h2>horizontal form</h2>
    <p>
        <label>name</label>
        <input name="name" type="text" data-win-bind="value: item.name MCNEXT.UI.DataFormBinding" required />
    </p>
    <p>
        <label>gender</label>
        <select name="gender" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding">
            <option value="male">male</option>
            <option value="female">female</option>
            <option value="unknown">unknown</option>
        </select>
    </p>
    <p>
        <label>address</label>
        <span class="controlgroup">
            <input name="street" type="text" data-win-bind="value: item.address.street MCNEXT.UI.DataFormBinding" required /><br />
            <span class="grid grid1-2">
                <input name="zipcode" type="number" class="col1" data-win-bind="value: item.address.zipcode MCNEXT.UI.DataFormBinding" required minlength="5" />
                <input name="city" type="text" class="col2" data-win-bind="value: item.address.city MCNEXT.UI.DataFormBinding" required />
            </span>
        </span>
    </p>
    <p class="actions">
        <button class="mcn-dataform-submit" data-win-bind="value: isValid MCNEXT.Bindings.enableIf">save</button>
        <button class="mcn-dataform-cancel">cancel</button>
    </p>
</form>

see http://jqueryvalidation.org/documentation/ for details about validation options

Last edited Mar 19, 2014 at 2:19 PM by gleborgne, version 1