---
layout: default
title: Demonstration
slug: demonstration
base_url: "../"
main_js: "assets/js/demonstration.js"
---

<div id="content">
    <h1>Demonstration</h1>

    <table class="table">
        <thead>
            <tr>
                <th width="30%">Demo</th>
                <th width="70%">Code</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="vertical-align: top">
                    <form id="demo-form">
                        <label for="fName">Full name *</label>
                        <input type="text"
                               id="fName"
                               class="form-element"
                               data-mapper-property="fullName"
                               data-validation-required="true"/>
                        <label for="e">Email *</label>
                        <input type="text"
                               id="e"
                               class="form-element"
                               data-mapper-property="email"
                               data-validation-required="true"
                               data-type="email"/>
                        <label for="w">Website *</label>
                        <input type="text"
                               id="w"
                               class="form-element"
                               data-mapper-property="url"
                               data-type="url"/>
                        <label for="m">Message (min 20, maxy 200)</label>
                        <textarea name="message"
                                  class="form-element"
                                  id="m"
                                  cols="17"
                                  rows="8"
                                  data-mapper-property="message"
                                  data-validation-min-length="20"
                                  data-validation-max-length="200"
                                  data-validation-trigger="none"></textarea>

                        <div class="messages"></div>

                        <div class="grid-row m-bottom-15">
                            <div class="grid-col-12 btn pointer align-center" id="get-data">
                                <span class="icon-circle-ok"></span>
                            </div>
                        </div>
                        <div class="grid-row">
                            <div class="grid-col-12 btn pointer align-center" id="set-data">
                                Set Data
                            </div>
                        </div>
                    </form>
                </td>
                <td>
                    <div class="doc-code">
                        {% highlight html %}
<form id="demonstration-form">
    <label for="firstName">Full name *</label>
    <input type="text"
           id="firstName"
           data-validation-required="true"/>
    <label for="email">Email *</label>
    <input type="text"
           id="email"
           data-validation-required="true"
           data-type="email"/>
    <label for="website">Website *</label>
    <input type="text"
           id="website"
           data-type="url"/>
    <label for="message">Message (min 20, maxy 200)</label>
    <textarea name="message"
              id="message"
              cols="17"
              rows="8"
              data-validation-min-length="20"
              data-validation-max-length="200"
              data-validation-trigger="none"></textarea>
</form>

<script type="text/javascript">
    requirejs.config({
        paths: {
            'globalize': '...',
            'cultures': '...'
        }
    });

    define(['js/form'], function(Form) {
        var form = new Form($('#demo-form')),
            data =  form.mapper.getData();

        $('#get-data').on('click', function() {
            if (form.validation.validate()) {
                $('#result').html(print(data));
            }
        });

        $('#set-data').on('click', function() {
            form.mapper.setData({
                fullName: 'Johannes Wachter',
                email: 'johannes@example.com',
                url: 'example.com',
                message: 'ich bin ein berliner'
            });
        });
    });
</script>
                        {% endhighlight %}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>