Bootstrap jQuery & HTML5 Form Validation Demo

jQuery4u @samdeering

by jquery4u

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<form action="#" method="post" id="rego-form" name="rego-form" class="form-horizontal" data-validate="parsley">
    <div class="control-group">
        <label class="control-label" for="name">Full Name</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-user"></i></span>

                <input type="text" class="input-xlarge" placeholder="Enter your full name" id="name" name="name" data-trigger="change" data-validation-minlength="3" data-error-message="This is required." />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="email">Email</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span>

                <input type="text" placeholder="Enter your email address" id="email" name="email" data-trigger="change" data-error-message="This is required." />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-lock"></i></span>

                <input type="password" placeholder="Enter your password" id="password" name="password" data-trigger="change" data-validation-minlength="6" data-error-message="This is required." />
            </div>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn btn-success">Submit form</button>
        </div>
    </div>
</form>

JavaScript

$(document).ready(function () {
    $('#rego-form').parsley({
        successClass: 'success',
        errorClass: 'error'
    });
});

/* Parsley dist/parsley.min.js build version 1.1.16-dev http://parsleyjs.org */! function (d) {
    var h = function (a) {
        this.messages = {
            defaultMessage: "This value seems to be invalid.",
            type: {
                email: "This value should be a valid email.",
                url: "This value should be a valid url.",
                urlstrict: "This value should be a valid url.",
                number: "This value should be a valid number.",
                digits: "This value should be digits.",
                dateIso: "This value should be a valid date (YYYY-MM-DD).",
                alphanum: "This value should be alphanumeric.",
                phone: "This value should be a valid phone number."
            },
            notnull: "This value should not be null.",
            notblank: "This value should not be blank.",
            required: "This value is required.",
            regexp: "This value seems to be invalid.",
            min: "This value should be greater than %s.",
            max: "This value should be lower than %s.",
            range: "This value should be between %s and %s.",
            minlength: "This value is too short. It should have %s characters or more.",
            maxlength: "This value is too long. It should have %s characters or less.",
            rangelength: "This value length is invalid. It should be between %s and %s characters long.",
            mincheck: "You must select at least %s choices.",
            maxcheck: "You must select %s choices or less.",
            rangecheck: "You must select between %s and %s choices.",
            equalto: "This value should be the same."
        };
        this.init(a)
    };
    h.prototype = {
        constructor: h,
        validators: {
            notnull: function (a) {
                return 0 < a.length
   ...