plugin-tachyons/multiple-fields.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Multiple fields in the same row - FormValidation</title>
        <meta charset="utf-8" />
        <meta content="width=device-width,initial-scale=1" name="viewport" />
        <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">Full name</div>
                    <div class="fl w-30 mr2">
                        <input
                            type="text"
                            class="input-reset ba b--black-20 pa2 mb2 db w-100"
                            name="firstName"
                            placeholder="First name"
                        />
                    </div>
                    <div class="fl w-30">
                        <input
                            type="text"
                            class="input-reset ba b--black-20 pa2 mb2 db w-100"
                            name="lastName"
                            placeholder="Last name"
                        />
                    </div>
                </div>
            </div>

            <div class="cf mb2">
                <div class="fl w-100">
                    <div class="fl w-25 pa2">Address</div>
                    <div class="fl w-20 mr2">
                        <input
                            type="text"
                            class="input-reset ba b--black-20 pa2 mb2 db w-100"
                            name="city"
                            placeholder="City"
                        />
                    </div>
                    <div class="fl w-20 mr2">
                        <input
                            type="text"
                            class="input-reset ba b--black-20 pa2 mb2 db w-100"
                            name="state"
                            placeholder="State"
                        />
                    </div>
                    <div class="fl w-20 mr2">
                        <input
                            type="text"
                            class="input-reset ba b--black-20 pa2 mb2 db w-100"
                            name="zipcode"
                            placeholder="Zipcode"
                        />
                    </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="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
        <script src="/vendors/@form-validation/umd/plugin-tachyons/index.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function (e) {
                FormValidation.formValidation(document.getElementById('demoForm'), {
                    fields: {
                        firstName: {
                            validators: {
                                notEmpty: {
                                    message: 'The first name is required',
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z\s]+$/,
                                    message: 'The first name can only consist of alphabetical and space',
                                },
                            },
                        },
                        lastName: {
                            validators: {
                                notEmpty: {
                                    message: 'The last name is required',
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z\s]+$/,
                                    message: 'The last name can only consist of alphabetical and space',
                                },
                            },
                        },
                        city: {
                            validators: {
                                notEmpty: {
                                    message: 'The city is required',
                                },
                            },
                        },
                        state: {
                            validators: {
                                notEmpty: {
                                    message: 'The state is required',
                                },
                            },
                        },
                        zipcode: {
                            validators: {
                                notEmpty: {
                                    message: 'The zipcode is required',
                                },
                            },
                        },
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        tachyons: new FormValidation.plugins.Tachyons({
                            rowSelector: function (field, ele) {
                                switch (field) {
                                    case 'firstName':
                                    case 'lastName':
                                        return '.w-30';

                                    case 'city':
                                    case 'state':
                                    case 'zipcode':
                                        return '.w-20';

                                    default:
                                        return '.fl';
                                }
                            },
                        }),
                        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>