J plugin

Allows to use FormValidation as a jQuery plugin

Usage

The following piece of code is the starting point to use the J plugin:

<html>
    <head>
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <form id="demoForm" method="POST">...</form>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
        <script src="/vendors/@form-validation/umd/plugin-j/index.min.js"></script>

        <script>
            $(document).ready(function() {
                $('#demoForm').formValidation({
                    // Options
                    fields: {
                        ...
                    },
                    plugins: {
                        ...
                    },
                });

                // It's the same as
                FormValidation.formValidation(
                    document.getElementById('demoForm'),
                    {
                        fields: {
                            ...
                        },
                        plugins: {
                            ...
                        },
                    }
                );
            });
        </script>
    </body>
</html>

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

After initializing the form with the plugin using $(form).formValidation(options), there are two ways to call the plugin method:

// Get plugin instance
const fv = $('#demoForm').data('formValidation');

// and then call method
// Replace METHOD_NAME with the real method name
fv.METHOD_NAME(parameters);

// Replace METHOD_NAME with the real method name
$('#demoForm').formValidation(METHOD_NAME, parameters);

The first way mostly returns the FormValidation.Core instance, meanwhile the second one always returns the jQuery object representing the form. It's possible to chain methods as below:

// The first way
$('#demoForm').data('formValidation').updateFieldStatus('birthday', 'NotValidated').validateField('birthday');

// The second one
$('#demoForm').formValidation('updateFieldStatus', 'birthday', 'NotValidated').formValidation('validateField', 'birthday');

Basic example

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css" />
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <form id="demoForm" method="POST">
            <div class="cf mb2">
                <div class="fl w-100">
                    <div class="fl w-25 pa2">Product name</div>
                    <div class="fl w-75">
                        <input type="text" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="name" />
                    </div>
                </div>
            </div>

            <div class="cf mb2">
                <div class="fl w-100">
                    <div class="fl w-25 pa2">Price ($)</div>
                    <div class="fl w-75">
                        <input type="text" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="price" />
                    </div>
                </div>
            </div>

            <div class="cf mb2">
                <div class="fl w-100">
                    <div class="fl w-25 pa2">Size</div>
                    <div class="fl w-75">
                        <div class="mb2">
                            <label><input type="checkbox" name="size[]" value="s" /> S</label>
                        </div>
                        <div class="mb2">
                            <label><input type="checkbox" name="size[]" value="m" /> M</label>
                        </div>
                        <div class="mb2">
                            <label><input type="checkbox" name="size[]" value="l" /> L</label>
                        </div>
                        <div class="mb2">
                            <label><input type="checkbox" name="size[]" value="xl" /> XL</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cf mb2">
                <div class="fl w-100">
                    <div class="fl w-25 pa2">Available in store</div>
                    <div class="fl w-75">
                        <div class="mb2">
                            <label><input type="radio" name="availability" value="yes" /> Yes</label>
                        </div>
                        <div class="mb2">
                            <label><input type="radio" name="availability" value="no" /> No</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cf mb2">
                <div class="fl w-100">
                    <div class="fl w-25 pa2"></div>
                    <div class="fl w-50">
                        <!-- Do NOT use name="submit" or id="submit" for the Submit button -->
                        <button type="submit" class="ba b--black-20 bg-blue white ph3 pv2 br2">Add product</button>
                    </div>
                </div>
            </div>
        </form>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
        <script src="/vendors/@form-validation/umd/plugin-tachyons/index.min.js"></script>
        <script src="/vendors/@form-validation/umd/plugin-j/index.min.js"></script>

        <script>
            $(document).ready(function () {
                $('#demoForm').formValidation({
                    fields: {
                        name: {
                            validators: {
                                notEmpty: {
                                    message: 'The name is required',
                                },
                                stringLength: {
                                    min: 6,
                                    max: 30,
                                    message: 'The name must be more than 6 and less than 30 characters long',
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9_]+$/,
                                    message: 'The name can only consist of alphabetical, number and underscore',
                                },
                            },
                        },
                        price: {
                            validators: {
                                notEmpty: {
                                    message: 'The price is required',
                                },
                                numeric: {
                                    message: 'The price must be a number',
                                },
                            },
                        },
                        'size[]': {
                            validators: {
                                notEmpty: {
                                    message: 'The size is required',
                                },
                            },
                        },
                        availability: {
                            validators: {
                                notEmpty: {
                                    message: 'The availability option is required',
                                },
                            },
                        },
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        tachyons: new FormValidation.plugins.Tachyons(),
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        icon: new FormValidation.plugins.Icon({
                            valid: 'fa fa-check',
                            invalid: 'fa fa-times',
                            validating: 'fa fa-refresh',
                        }),
                    },
                });
            });
        </script>
    </body>
</html>

Changelog

v2.1.0

The @form-validation/plugin-j package doesn't register popular validators

v2.0.0

Add the npm package

v1.0.0

First release

InternationalTelephoneInput plugin L10n plugin