riot-action-forms

Riot Action Forms

Binds form with Riot Observable and implements validation based on element attributes. Serializes inputs using form-serialize and passes payload to submit event.

Configuration

You can configure the forms using the RiotActionForms.configure() function. This will append to or override the default configurations.

The default configurations are

{

    // Regular expressions used to validate
    regexes: {

        alphanum: /^[a-z0-9]+$/i,
        alphanumspace: /^[a-z0-9\s]+$/i,
        name: /^[a-z\s\-\,\.]+$/i,
        username: /^[a-z0-9][a-z0-9\s\-\_\+\.]+[a-z0-9]$/i,
        fqdn: /^[a-z0-9][a-z0-9\-\_\.]+[a-z0-9]{2,20}$/i,
        tld: /^[a-z]{2,20}/i,
        phone: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
        email: /.+@.+\..+/i
    },

    // Feedback, state, and container classes
    classes: {

        container: 'field',
        error: 'error',
        help: 'help',
        hide: 'hide',
        info: 'info',
        success: 'success',
        warning: 'warning'
    },

    // Field formatting functions
    format: {
        creditcard: function (value) {

            const formatted = value.match(/([0-9]{4})|([0-9]+)/ig);
            return formatted ? formatted.join(' ') : '';
        }
    },

    // Serialization options for `form-serialize`
    serialize: {

        hash: true
    }
}

For example, you could do:

RiotActionForms.configure({

    // Add new regular expressions
    regexes: {

        strongPassword: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^0-9a-zA-Z])(?=.{8,})/,
        confirmationCode: /[0-9a-f]/i,
        hexColor: /[0-9A-Fa-f]{6}/g,


        // Overwrite the builtin ones
        phone: /^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$/,
        email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    },

    // Add new formatting functions. These will replace the field's value with the formatted value
    format: {

        phone: function (value) {

            const m = value.match(RiotActionForms.config.regexes.phone);

            if (!m) {

                return value;
            }

            let val = `(${m[1] || m[2]}) ${m[3]}-${m[4]}`

            if (m[5]) {
                val += ` extension ${m5}`;
            }

            return val;
        }
    }

    // If you wanted RiotActionForms to work with Twitter Bootstrap
    classes: {

        container: 'form-group',
        error: 'has-error',
        help: 'help-block',
        hide: 'hidden',
        info: 'has-info',
        success: 'has-success',
        warning: 'has-warning'
    },

    serialize: {

        // If you want the payload to serialize a query string instead of a JSON object
        hash: false,

        // If true, disabled fields will also be serialized
        disabled: true,

        // If true, empty fields will also be serialized
        empty: true
    }
})

Events

FORM

Form will be Riot Observable and have on one off trigger functions appended to it. You can hook into the form's events as needed.

Event	Description	Data Passed
'validate'	Validates all fields in the form	Event: native onsubmit
'validated'	After form has been validated	Same as validate
'invalid'	If validation fails	String: Message noting the invalid fields Array: list of invalid fields
'submit'	After validation is successful	Event: native onsubmit Object|String: Serialized payload (type based on configuration)
'submitted'	After submit event	Same as submit
'rebind'	Triggers binding of elements for if new fields are added	N/A
'rebinded'	After new elements have been binded	N/A
'reset'	Resets the validity status of each element	N/A
'ready'	After form has been binded and is ready to use	N/A

---

FIELDS

Fields will be Riot Observable and have on one off trigger functions appended to it. You can hook into the fields' events as needed.

Event	Description
'validate'	Validates field
'validated'	After field has been validated

---

my-form.tag

<myform>

    <form ref='testForm'>

        <div class="field">

            <label for='alphanum'>Alphanumerical</label>
            <input type='text' name='alphanum' validate='alphanum' on='keyup blur' required />
            <small class='help hide'>Help for alphanum regex</small>
        </div>

        <div class="field">

            <label for='alphanum'>Alphanumerical Spaces</label>
            <input type='text' name='alphanumspace' validate='alphanumspace' on='keyup blur' required />
            <small class='help hide'>Help for alphanumspace regex</small>
        </div>

        <div class="field">

            <label for='name'>Name</label>
            <input type='text' name='name' validate='name' on='keyup blur' required />
            <small class='help hide'>Help for name regex</small>
        </div>

        <div class="field">

            <label for='username'>Username</label>
            <input type='text' name='username' validate='username' on='keyup blur' required />
            <small class='help hide'>Help for username regex</small>
        </div>

        <div class="field">

            <label for='fqdn'>FQDN</label>
            <input type='text' name='fqdn' validate='fqdn' on='keyup blur' required />
            <small class='help hide'>Help for fqdn regex</small>
        </div>

        <div class="field">

            <label for='tld'>TLD</label>
            <input type='text' name='tld' validate='tld' on='keyup blur' required />
            <small class='help hide'>Help for tld regex</small>
        </div>

        <div class="field">

            <label for='phone'>Phone</label>
            <input type='text' name='phone' validate='phone' on='keyup blur' required />
            <small class='help hide'>Help for phone regex</small>
        </div>

        <div class="field">

            <label for='email'>Email</label>
            <input type='text' name='email' validate='email' on='keyup blur' required />
            <small class='help hide'>Help for email regex</small>
        </div>

        <div class="field">

            <label for='equals1'>Equals 1</label>
            <input type='text' name='equals1' on='keyup blur' required />
            <small class='help hide'>Help for equals1 regex</small>
        </div>

        <div class="field">

            <label for='equals2'>Equals 2</label>
            <input type='text' name='equals2' equals='[name=equals1' on='keyup blur' required />
            <small class='help hide'>Help for equals2 regex</small>
        </div>

        <div class="field">

            <label for='regex'>Regex</label>
            <input type='text' name='regex' regex='regex' on='keyup blur' required />
            <small class='help hide'>Help for regex regex</small>
        </div>

        <div class="field">

            <label for='creditcard'>Format Credit Card</label>
            <input type='text' name='creditcard' format='creditcard' on='keyup blur' required />
            <small class='help hide'>Help for regex regex</small>
        </div>

        <div class='field'>

            <button>Submit</button>
        </div>
    </form>

    <script>

        this.mixin('actionForms');

        this.on('mount', () => {

            this.actionForms.bindForm(this.refs.testForm);

            console.log(this.refs.testForm);
        });
    </script>
</myform>

app.js

riot.mixin('actionForms', { actionForms: RiotActionForms });

riot.mount('*');