JSFiddle - React, Tailwind, and code Playground

Validate A client-side validation plugin for Twitter Bootstrap

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
    <div class="container">
        <section>
            <div class="page-header">
                <h1>Validate <small>A client-side validation plugin for Twitter Bootstrap</small></h1>
            </div>

            <form action="/" method="post" id="contractor_form" name="contractor_form" class="form-horizontal" autocomplete="off" data-init="validate" data-messages='{"required":"En Blanco"}'>
                <div class="control-group">
                    <label class="control-label" for="contractor_id">Contractor Id</label>
                    <div class="controls">
                        <input type="text" placeholder="12345" id="contractor_id" name="contractor_id" data-required data-integerpositive />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="contractor_email">Email</label>
                    <div class="controls">
                        <input type="text" placeholder="[email protected]" id="contractor_email" name="contractor_email" data-required data-email />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="contractor_currency">Currency</label>
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on">$, etc.</span>
                            <input type="text" placeholder="1,000 or 1.000" id="contractor_currency" name="contractor_currency" data-currency />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"...

JavaScript

/**
 * Validate
 *
 * A plugin for client side validation for Twitter Bootstrap forms.
 *
 * Twitter Bootstrap:  v2.3.1
 * Plugin: v0.04
 *
 * @author: Carey Hinoki
 * @date: 2013-03-25
 * @updated: 2013-03-26
 */
(function ($, window, document, undefined) {
    "use strict";

    var validators = {
        required: {
            name: 'required',
            type: 'required',
            message: 'Field is required'
        },
        minlength: {
            name: 'minlength',
            type: 'minlength',
            message: 'Field is less than {0} characters'
        },
        maxlength: {
            name: 'maxlength',
            type: 'maxlength',
            message: 'Field is longer than {0} characters'
        },
        compareeq: {
            name: 'compareeq',
            type: 'compareeq',
            message: 'Field does not equal {0}'
        },
        comparelt: {
            name: 'comparelt',
            type: 'comparelt',
            message: 'Field is not less than {0}'
        },
        comparegt: {
            name: 'comparegt',
            type: 'comparegt',
            message: 'Field is not greater than {0}'
        },
        min: {
            name: 'min',
            type: 'min',
            message: 'Field is less than {0}'
        },
        max: {
            name: 'max',
            type: 'max',
            message: 'Field is more than {0}'
        },
        currency: {
            name: 'currency',
            type: 'regex',
            regex: new RegExp([
                '^',
                '(',
                    '[0-9]+',
                    '([.,][0-9]{2})?',
                '|',
                    '[0-9]{1,3}',
                    '([,][0-9]{3})*',
                    '([.][0-9]{2})?',
                '|',
                    '[0-9]{1,3}',
                    '([.][0-9]{3})*',
                    '([,][0-9]{2})?',
                ')',
                '$'
            ].join('')),
            message: 'Field is not...