urban-filehub/resources/js/components/bucket/form.riot

<urban-bucket-form>
    <div class="form">
        <form method="POST">

            <input type="hidden" name="_token" value={ state.csrfToken } if={ state.csrfToken } />

            <!-- title -->
            <div class="field is-horizontal">
                <div class="field-label is-normal">
                    <label class="label" for="title">
                        title
                    </label>
                </div>
                <div class="field-body">
                    <div class="field">
                        <p class="control">
                            <input id="title" class={ getClasses('title', 'input') } type="text" name="title" value={ props.title } onkeyup={ (event) => { state.validator.handle(event, 'title') }} />
                            <field-error errors={ state.validator.errors('title') } ></field-error>
                        </p>
                    </div>
                </div>
            </div>

            <!-- is public -->
            <div class="field is-horizontal">
                <div class="field-label is-normal">
                    <label class="label" for="public">
                        public
                    </label>
                </div>
                <div class="field-body">
                    <div class="field">
                        <input id="public" type="checkbox" name="public" value="1" checked={ props.public }>
                    </div>
                </div>
            </div>

            <!-- submit -->
            <div class="field">
                <div class="control">
                    <button class="button is-primary" type="submit" disabled={ state.validator.errors().length > 0 }>
                        Create
                    </button>
                </div>
            </div>

        </form>
    </div>
    <script>

    import Validator from '@tentakelfabrik/tiny-validator/src/validator'
    import FieldError from '../field-error.riot'

    riot.register('field-error', FieldError)

    /**
     *
     *
     *
     */

    export default {

        /**
         *
         *  @param  {[type]} props [description]
         *  @param  {[type]} state [description]
         *
         */
        onBeforeMount(props, state) {
            state.validator = new Validator({
                title: {
                    presence: true
                }
            }, this)

            //
            const meta = document.querySelector("meta[name='csrf-token']")

            if (meta) {
                state.csrfToken = meta.getAttribute("content")
            }
        },

        /**
         *
         *
         *  @param  {[type]} key
         *  @param  {[type]} defaultClass
         *  @return {[type]}
         *
         */
        getClasses(key, defaultClass) {
            const classes = [
                defaultClass
            ]

            const errors = this.state.validator.errors(key)

            if (errors && errors.length > 0) {
                classes.push('is-danger')
            }

            return classes.join(' ')
        }
    }

    </script>
</urban-bucket-form>