Parsley test

by alexsuch

HTML

<script src="http://parsleyjs.org/parsley.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://datejs.googlecode.com/svn/trunk/build/date-en-NZ.js"></script>
<div class="container">
    <form action="" data-focus="first" id="myForm">
        <fieldset>
            <legend>Registration form</legend>
            <label>Name</label>
            <input type="text" name="name" data-required="true" data-rangelength="[2,255]" />
            <label>Middle name</label>
            <input type="text" name="middleName" data-rangelength="[2,255]" />
            <label>Last name</label>
            <input type="text" name="lastName" data-required="true" data-rangelength="[4,255]" />
            <label>Email</label>
            <input type="text" name="lastName" data-required="true" data-type="email" />
            <label>Age</label>
            <input type="text" name="age" data-min="18" data-max="100" />
            <label>Birthdate</label>
            <input type="text" name="birthDate" data-required="true" data-dateformat="dd/MM/yyyy" />
            <label>Interests</label>
            <label>
                <input type="checkbox" name="interestAreas[]" data-mincheck="2" />Sports</label>
            <label>
                <input type="checkbox" name="interestAreas[]" />Health</label>
            <label>
                <input type="checkbox" name="interestAreas[]" />Photography</label>
            <label>
                <input type="checkbox" name="interestAreas[]" />Technology</label>
            <button type="submit" class="btn">Register me!</button>
        </fieldset>
    </form>
</div>

JavaScript

$('#myForm').parsley({
    validators: {
        dateformat: function (value, format) {
            if (!Date.parseExact(value, format)) return false;

            return true;
        }
    },
    messages: {
        dateformat: 'Wrong date format. Example: %s'
    }
});