Get started

Download

You can download a minimized version of the library or get the full source code at github.com.

Download source

Install with npm

$ npm install coreui-form

Требования

Для корректной работы на странице необходимо наличие:

Examples

Simple form


    <div id="form-simple"></div>

    <script>
        let simpleOptions = {
            send: {
                url: '/path/to/object/1',
                method: 'post'
            },
            record: {
                text: 'default text value',
                textarea: "123",
                date: "2023-01-01"
            },
            fields: [
                { type: 'text',     name: 'text',     label: 'Text',      width: 180 },
                { type: 'date',     name: 'date',     label: 'Date',      width: 180, description: 'Description text' },
                { type: 'textarea', name: 'textarea', label: 'Text Area', width: 180, attr: { style: 'height:60px; resize: vertical' } }
            ],
            onSubmit: function() { return false; },
            controls: [
                { type: "submit", content: "Save" },
            ],
        };

        let formSimple = CoreUI.form.create(simpleOptions);
        formSimple.render('form-simple');
    </script>

Groups


    <div id="form-groups"></div>

    <script>
        let groupOptions = {
            fields: [
                { type: 'group', label: 'Group collapsible', show: false,
                    fields: [
                        { type: 'text',     name: 'text',     label: 'Text',      width: 180 },
                        { type: 'number',   name: 'float',    label: 'Float',     width: 180, attr: { min: -2, max: 50, step: 0.1 }, precision: 2 },
                        { type: 'date',     name: 'date',     label: 'Date',      width: 180 },
                    ]
                },
                { type: 'group', label: 'Group 2', show: true, showCollapsible: false,
                    fields: [
                        { type: 'textarea', name: 'textarea', label: 'Text Area', width: 180, attr: { style: 'height:60px; resize: vertical' }, description: 'Description text' }
                    ]
                }
            ]
        };

        let formGroups = CoreUI.form.create(groupOptions);
        formGroups.render('form-groups');
    </script>

Control types


    <div id="form-controls"></div>

    <script>
        let controlsOptions = {
            fields: [
                { type: 'text', name: 'text', label: 'Text', width: 180}
            ],
            onSubmit: function() { return false; },
            controls: [
                { type: "submit", content: "Submit", onClick: function (form, e) { console.log('submit click') } },
                { type: "button", content: "Button", onClick: function (form, e) { console.log('button click') } },
                { type: "link",   content: "Link",   url: "#link-url", onClick: function (form, e) { console.log('link click') } },
                { type: "custom", content:
                    '<div class="form-check">' +
                        '<label class="form-check-label">' +
                            '<input class="form-check-input" type="checkbox">Custom control' +
                        '</label>' +
                    '</div>'
                }
            ],
        };

        let formControls = CoreUI.form.create(controlsOptions);
        formControls.render('form-controls');
    </script>

Attache fields


    <div id="form-attache"></div>

    <script>
        let attachOptions = {
            send: {
                url: '/path/to/object/1',
                method: 'post'
            },
            record: {
                text: 'Text value',
                date1: "2023-01-01",
                number0: 0,
                number1: 1,
                number2: 2,
                number3: 3,
                phone1: '+1-234-567',
                phone2: '+1-234-567',
                email1: 'example@mail.com',
                email2: 'example@mail.com'
            },
            fields: [
                { type: 'text', name: 'text',  label: 'Text', width: 180,
                    fields: [
                        { type: 'number', name: 'number0', width: 90 }
                    ]
                },
                { type: 'date', name: 'date1', label: 'Date range', width: 135,
                    fields: [
                        { type: 'date', name: 'date2', width: 135 }
                    ]
                },
                { type: 'number', name: 'number1', label: 'Numbers', width: 89,
                    fields: [
                        { type: 'number', name: 'number2', width: 89 },
                        { type: 'range',  name: 'number3', width: 89, attr: { min: 0, max: 10, step: 1 } }
                    ]
                },
                { type: 'tel', name: 'phone1', label: 'Contacts', width: 200, fieldsDirection: 'column',
                    fields: [
                        { type: 'tel',   name: 'phone2', width: 200 },
                        { type: 'email', name: 'email1', width: 200 },
                        { type: 'email', name: 'email2', width: 200 }
                    ]
                }
            ]
        };

        let formAttach = CoreUI.form.create(attachOptions);
        formAttach.render('form-attache');
    </script>

Layout


    <div id="form-layout"></div>

    <script>
        let layoutOptions = {
            send: {
                url: '/path/to/object/1',
                method: 'post'
            },
            controlsOffset: 0,
            layout:
                '<div class="d-flex flex-wrap">' +
                    '<div class="rounded-3 border border-1 shadow-sm p-2 me-3 mb-3" style="width: 315px">' +
                        '<h6>Position left</h6>' +
                        '[position_left]' +
                    '</div>' +

                    '<div class="flex-fill rounded-3 border border-1 shadow-sm p-2 mb-3">' +
                        '<h6>Position right</h6>' +
                        '[position_right]' +
                    '</div>' +

                    '<div class="w-100 text-center text-success m-3">custom html content</div>' +

                    '<div class="w-100 rounded-3 border border-1 shadow-sm p-2 mb-3">' +
                        '<h6>Position default</h6>' +
                        '[position_default]' +
                    '</div>' +
                '</div>',
            fields: [
                { type: 'text',   column: 'left',  name: 'text',   label: 'Text',   labelWidth: 100, width: 180 },
                { type: 'number', column: 'left',  name: 'number', label: 'Number', labelWidth: 100, width: 180 },
                { type: 'date',   column: 'right', name: 'date',   label: 'Date',   labelWidth: 100, width: 180 },
                { type: 'group',  label: 'Group 2', show: true,
                    fields: [
                        { type: 'textarea', name: 'textarea', label: 'Text Area', labelWidth: 150, width: 180, attr: { style: 'height:60px; resize: vertical' }, description: 'Description text' }
                    ]
                }
            ],
            onSubmit: function() { return false; },
            controls: [
                { type: "submit", content: "Save" },
            ],
        };

        let formLayout = CoreUI.form.create(layoutOptions);
        formLayout.render('form-layout');
    </script>

Readonly


    <div id="form-readonly"></div>

    <script>
        let readonlyOptions = {
            readonly: true,
            record: {
                text: 'Text value',
                textarea: "123",
                date: "2023-01-01",
                select: 2,
                checkbox: [1, 3],
            },
            fields: [
                { type: 'text',     name: 'text',     label: 'Text',      width: 180 },
                { type: 'date',     name: 'date',     label: 'Date',      width: 180 },
                { type: 'textarea', name: 'textarea', label: 'Text Area', width: 180, attr: { style: 'height:60px; resize: vertical' }, description: 'Description text' },
                { type: 'checkbox', name: 'checkbox', label: 'Check box',
                    options: [
                        { value: 1, text: 'Check 1' },
                        { value: 2, text: 'Check 2' },
                        { value: 3, text: 'Check 3' }
                    ]
                },
            ],
            controls: [
                { type: "button", content: "Writable all",  onClick: function (form, e) { form.readonly(false); } },
                { type: "button", content: "Readonly all",  onClick: function (form, e) { form.readonly(true); } },
                { type: "button", content: "Text writable", onClick: function (form, e) { form.getField('text').readonly(false); }, attr: { class: 'btn btn-success' } },
                { type: "button", content: "Text readonly", onClick: function (form, e) { form.getField('text').readonly(true); },  attr: { class: 'btn btn-success' } }
            ]
        };

        let formReadonly = CoreUI.form.create(readonlyOptions);
        formReadonly.render('form-readonly');
    </script>

Validation


    <div id="form-validation"></div>

    <script>
        let validationOptions = {
            validate: true,
            record: {
                phone: "abc",
                email: "example",
                date: "2023-06-01",
            },
            fields: [
                { type: 'text',           name: 'text',     label: 'Text',      width: 180, required: true, description: "Required field" },
                { type: 'tel',            name: 'phone',    label: 'Phone',     width: 180, attr: { pattern: '\\+[\\d\\-]+' }, description: "Phone format", invalidText: "format +1234" },
                { type: 'email',          name: 'email',    label: 'Email',     width: 180 },
                { type: 'passwordRepeat', name: 'pass',     label: 'Password',  width: 180, required: true, showBtn: true },
                { type: 'date',           name: 'date',     label: 'Date',      width: 180, attr: { min: "2023-06-06", max: "2023-06-14" }, description: "Date range validation" },
                { type: 'textarea',       name: 'textarea', label: 'Text area', width: 180, attr: { style: 'height:60px; resize: vertical' }, invalidText: "Invalid field text", validText: "Valid field text" }
            ],
            controls: [
                { type: "submit", content: "Save" },
                { type: "button", content: "Is valid text field", onClick: function (form, e) { alert(form.getField('text').isValid()); } },
                { type: "button", content: "Invalid text",        onClick: function (form, e) { form.getField('textarea').validate(false); } },
                { type: "button", content: "Valid text",          onClick: function (form, e) { form.getField('textarea').validate(true); } },
                { type: "button", content: "Custom validate",     onClick: function (form, e) { form.getField('textarea').validate(false, "Custom invalid text"); } },
                { type: "button", content: "Hide validate",       onClick: function (form, e) { form.getField('textarea').validate(null); } }
            ]
        };

        let formValidation = CoreUI.form.create(validationOptions);
        formValidation.render('form-validation');
    </script>

Other methods


    <div id="form-methods"></div>

    <script>
        let methodsOptions = {
            record: {
                text: "Text value",
                textarea: "Textarea value"
            },
            fields: [
                { type: 'text',  name: 'text',  label: 'Text', labelWidth: 100, width: 180, required: true },
                { type: 'group', label: 'Group fields', show: true,
                    fields: [
                        { type: 'textarea', name: 'textarea', label: 'Text area', labelWidth: 100, width: 180, attr: { style: 'height:60px' }}
                    ]
                }
            ],
            controlsOffset: 100,
            controls: [
                { type: "submit", content: "Save" },
                { type: "button", content: "Lock",              onClick: function (form) { form.lock(); } },
                { type: "button", content: "Unlock",            onClick: function (form) { form.unlock(); } },
                { type: "button", content: "getOptions",        onClick: function (form) { alert(JSON.stringify(form.getOptions())); } },
                { type: "button", content: "getRecord",         onClick: function (form) { alert(JSON.stringify(form.getRecord())) } },
                { type: "button", content: "getData",           onClick: function (form) { alert(JSON.stringify(form.getData())) } },
                { type: "button", content: "showError",         onClick: function (form) { form.showError('Text error') } },
                { type: "button", content: "hideError",         onClick: function (form) { form.hideError() } },
                { type: "button", content: "getFields (log)",   onClick: function (form) { console.log(form.getFields()) }, attr: { class: 'btn btn-dark' } },
                { type: "button", content: "getField (log)",    onClick: function (form) { console.log(form.getField('text')) }, attr: { class: 'btn btn-dark' } },
                { type: "button", content: "getControls (log)", onClick: function (form) { console.log(form.getControls()) }, attr: { class: 'btn btn-dark' } },
                { type: "button", content: "getGroups (log)",   onClick: function (form) { console.log(form.getGroups()) }, attr: { class: 'btn btn-dark' } },
            ]
        };

        let formMethods = CoreUI.form.create(methodsOptions);
        formMethods.render('form-methods');
    </script>

Events


    <div id="form-events"></div>

    <script>
        let eventsOptions = {
            send: {
                url: '/path/to/object/1',
                method: 'post'
            },
            record: {
                text: "Text value",
                modal: { value: "1", text: "text modal" }
            },
            labelWidth: 100,
            fields: [
                { type: 'text',  name: 'text',  label: 'Text',  width: 250 },
                { type: 'modal', name: 'modal', label: 'Modal', width: 250,
                    options: {
                        title: 'Modal title',
                        size: 'md',
                        url: 'data/modal.html',
                        onShow:   function () { console.log('modal onShow') },
                        onHidden: function () { console.log('modal onHidden') },
                        onClear:  function () { console.log('modal onClear') },
                        onChange: function () { console.log('modal onChange') },
                    }
                },
            ],
            onSubmit: function() { console.log('form onSubmit'); },
            controls: [
                { type: "submit", content: "Submit" },
                { type: "button", content: "Button", onClick: function () { console.log('button onClick') } },
            ]
        };

        let formEvents = CoreUI.form.create(eventsOptions);

        formEvents.on('modal_load_before',   function(modal, xhr) {                          console.log('modal before-load-modal') } );
        formEvents.on('modal_load_success',  function(modal, result) {                       console.log('modal success-load-modal') } );
        formEvents.on('modal_load_error',    function(modal, xhr, textStatus, errorThrown) { console.log('modal error-load-modal') } );
        formEvents.on('modal_load_complete', function(modal, xhr, textStatus) {              console.log('modal complete-load-modal') } );
        formEvents.on('modal_select',        function(modal, xhr, textStatus) {              console.log('modal select-modal') } );

        formEvents.on('show',        function() {                                   console.log('form shown') } );
        formEvents.on('send',         function(form, data) {                         console.log('form send') } );
        formEvents.on('send_start',   function(form, xhr) {                          console.log('form start-send') } );
        formEvents.on('send_success', function(form, result) {                       console.log('form success-send') } );
        formEvents.on('send_error',   function(form, xhr, textStatus, errorThrown) { console.log('form error-send') } );
        formEvents.on('send_end',     function(form, xhr, textStatus) {              console.log('form end-send') } );

        formEvents.render('form-events');
    </script>

File upload


    <div id="form-file-upload"></div>

    <script>
        let formFileUploads = CoreUI.form.create({
            send: {
                url: '/path/to/object/1',
                method: 'post'
            },
            record: {
                text: "Text value",
                files: [
                    {
                        id: 1,
                        name: 'Cat.jpg',
                        size: 254361,
                        urlPreview: 'data/img/cat.jpg',
                        urlDownload: 'data/img/cat.jpg',
                    },
                    {
                        id: 2,
                        name: 'Flower.jpg',
                        size: 924160,
                        urlPreview: 'data/img/flower.jpg',
                        urlDownload: 'data/img/flower.jpg',
                    },
                ]
            },
            fields: [
                { type: 'text',  name: 'text',  label: 'Text',  width: 250 },
                { type: 'fileUpload', name: 'files', label: 'File',
                    options: {
                        url: 'data/file.json',
                        fieldName: 'file',
                        sizeLimit: 1024 * 1024,
                        filesLimit: 0
                    }
                },
            ],
            onSubmit: function(form) {
                alert(JSON.stringify(form.getData()));
                return false;
            },
            controls: [
                { type: "submit", content: "Submit" },
            ]
        });

        formFileUploads.render('form-file-upload');
    </script>

All options


    <div id="form-all"></div>

    <script>
        let allOptions = {
            id: "myform",
            lang: 'en',
            title: 'Form title',
            send: {
                url: '/path/to/object/1',
                method: 'post',
                format: 'form'
            },
            validResponse: {
                headers: {
                    'Content-Type': [ 'application/json', 'application/json; charset=utf-8' ]
                },
                dataType: [ 'json' ],
            }
            width: '100%',
            minWidth: 500,
            maxWidth: '100%',
            controlsOffset: 150,
            labelWidth: 150,
            fieldWidth: 200,
            readonly: false,
            validate: true,
            errorClass: 'error1 error2',
            onSubmit: function(form, data) { console.log(data); return false; },
            layout:
                '<div class="d-flex flex-wrap">' +
                    '<div style="width: 500px">[position_left]</div>' +
                    '<div class="flex-fill">[position_right]</div>' +
                    '<div class="border-bottom w-100 my-4"></div>' +
                    '<div class="w-100">[position_default]</div>' +
                '</div>',
            record: {
                text: 'default text value',
                mask: '1234 AB-7',
                int: 10,
                float: -1.1,
                range: 40,
                email: 'example@mail.com',
                tel: '123-456-7890',
                url: 'https://www.example.com',
                color: '#695D98',
                password: 123,
                password2: 123,
                textarea: "123",

                date: "2023-01-01",
                time: "12:00",
                datetime: "2023-06-12 19:30:00",
                date_month: "2023-01",
                date_week: "2023-W18",

                select: 2,
                select_multiple: [ 2, 3 ],
                modal: { value: 1, text: "text" },
                dataset: [
                    { nmbr: 123,   date_order: "2023-01-01" },
                    { nmbr: "234", date_order: "2023-02-01" },
                ],
                checkbox: [ 1, 3 ],
                radio: 2,
                is_active_sw: 'Y',
                hidden: 'value',
                wysiwyg: 'Simple wysiwyg editor'
            },
            fields: [
                { type: 'group', label: 'Text and numbers', show: true, showCollapsible: true, column: 'left',
                    fields: [
                        { type: 'text', name: 'text', label: 'Text', attr: { minlength: 3, maxlength: 255 }, required: true, invalidText: 'Required field',
                            datalist: [
                                { value: 'Adams, John',    label: 'Group 1' },
                                { value: 'Johnson, Peter', label: 'Group 1' },
                                { value: 'Lewis, Frank',   label: 'Group 2' },
                                { value: 'Cruz, Steve',    label: 'Group 2' },
                                { value: 'Donnun, Nick',   label: 'Group 2' }
                            ]
                        },
                        { type: 'mask',           name: 'mask',      label: 'Mask',      mask: '0000 AA-0', options: { translation: { A: {pattern: /[A-Z]/}, } } },
                        { type: 'number',         name: 'float',     label: 'Float',     width: 100, attr: { min: -2, max: 50, step: 0.1 }, precision: 2 },
                        { type: 'number',         name: 'int',       label: 'Int',       width: 100, attr: { min: -2, max: 50 }, },
                        { type: 'email',          name: 'email',     label: 'Email'},
                        { type: 'tel',            name: 'tel',       label: 'Phone',     attr: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}" } },
                        { type: 'url',            name: 'url',       label: 'Url',       attr: { pattern: "https://.*" } },
                        { type: 'password',       name: 'password',  label: 'Password',  attr: { minlength: 8 }, suffix: ' <i>min length 8</i>' },
                        { type: 'passwordRepeat', name: 'password2', label: 'Password repeat', width: 100, showBtn: true },
                        { type: 'textarea',       name: 'textarea',  label: 'Text Area', attr: { style: 'height:60px; resize: vertical' }, description: 'Description text' },
                        { type: 'hidden',         name: 'hidden' }
                    ]
                },

                { type: 'group', label: 'Date and time', column: 'right', id: 'group_id',
                    fields: [
                        { type: 'date',           name: 'date',       label: 'Date',       width: 110, },
                        { type: 'time',           name: 'time',       label: 'time',       width: 110, },
                        { type: 'datetime-local', name: 'datetime',   label: 'Date time',  attr: { min: "2023-06-06 00:00:00", max: "2023-06-14 00:00:00" } },
                        { type: 'month',          name: 'date_month', label: 'Date month', },
                        { type: 'week',           name: 'date_week',  label: 'Date week', },
                        { type: 'date',           name: 'date_rage1', label: 'Date range', width: 110,
                            fields: [
                                { type: 'date', name: 'date_rage2', width: 110 }
                            ]
                        },
                    ]
                },

                { type: 'color', name: 'color', label: 'Color' },
                { type: 'range', name: 'range', label: 'Range',  width: 200, attr: { min: 0, max: 100, step: 1 },
                    datalist: [
                        { value: '10' },
                        { value: '20' },
                        { value: '30' },
                    ]
                },

                { type: 'select', name: 'select', label: 'Select', width: 200, column: 'default',
                    options: [
                        { value: '', text: 'No value' },
                        { type: "group", label: 'Group 1',
                            options : [
                                { value: 1, text: 'Adams John' },
                                { value: 2, text: 'Johnson Peter' },
                            ]
                        },
                        { type: "group", label: 'Group 2', attr: { class: "group-class"  },
                            options : [
                                { value: 3, text: 'Lewis Frank' },
                                { value: 4, text: 'Cruz Steve' },
                                { value: 5, text: 'Donnun Nick' }
                            ]
                        }
                    ]
                },
                { type: 'select', name: 'select_multiple', label: 'Multiple', width: 200, attr: { multiple: "multiple" },
                    options: [
                        { value: 1, text: 'Adams John' },
                        { value: 2, text: 'Johnson Peter' },
                        { value: 3, text: 'Lewis Frank' },
                        { value: 4, text: 'Cruz Steve' },
                        { value: 5, text: 'Donnun Nick' },
                    ]
                },
                { type: 'checkbox', name: 'checkbox', label: 'Check box',
                    options: [
                        { value: 1, text: 'Check 1' },
                        { value: 2, text: 'Check 2' },
                        { value: 3, text: 'Check 3' }
                    ]
                },
                { type: 'radio', name: 'radio', label: 'Radio Box', invalidText: 'Required field',
                    options: [
                        { value: 1, text: 'Radio 1' },
                        { value: 2, text: 'Radio 2' },
                        { value: 3, text: 'Radio 3' }
                    ]
                },
                { type: 'switch', name: 'is_active_sw', label: 'Switch', valueY: 1, valueN: 0 },
                { type: 'file',   name: 'file',         label: 'Files',  width: 300 },
                { type: 'modal',  name: 'modal',        label: 'Modal',  width: 300,
                    options: {
                        title: 'Modal title',
                        size: 'lg',
                        url: 'data/modal.html',
                        onHidden: function () { console.log('onHidden') },
                        onClear:  function () { console.log('onClear') },
                        onChange: function () { console.log('onChange') },
                    }
                },
                { type: 'dataset', name: 'dataset', label: 'Dataset',
                    options: [
                        {
                            type:  'text',
                            title: 'Номер',
                            name:  'nmbr',
                            width: 200
                        },
                        {
                            type:  'date',
                            title: 'Дата',
                            name:  'date_order',
                            attr:  { style: 'width: 140px' }
                        }
                    ]
                },

                { type: 'custom',  label: 'Custom', content: '<div class="mt-2"><i>html</i></div>' },
                { type: 'custom',  label: 'Custom', content: "<i>html</i>" },
                { type: 'wysiwyg', name: 'wysiwyg', label: 'Wysiwyg', width: 600, height: 300, options: 'simple' }
            ],
            controls: [
                { type: "submit", content: "Save",   onClick: function (e) { } },
                { type: "button", content: "Button", onClick: function (e) { } },
                { type: "link",   content: "Link", url: "#" },
                { type: "custom", content:
                    '<div class="form-check">' +
                        '<label class="form-check-label">' +
                        '<input class="form-check-input" type="checkbox">' +
                        'Check me</label>' +
                    '</div>'
                }
            ]
        };

        let form = CoreUI.form.create(allOptions);
        $('#form-all').html(form.render());
        form.initEvents();
    </script>

Options

Name type default description
id string crc32b Идентификатор формы. Этот id будет указан вместо уникального значения
lang string en Язык формы
title string Заголовок формы
send object Адрес и Http метод используемые для отправки данных с формы. {url: '/path', method: 'post'}
validResponse object Описание заголовков и данных которые должен вернуть сервер, иначе ошибка. { headers : { 'Content-Type': ['application/json'] }, dataType: ['json'] }
width string|number Ширина занимаемая формой
minWidth string|number Минимальная ширина занимаемая формой
maxWidth string|number Максимальная ширина занимаемая формой
labelWidth string|number Ширина для названий полей формы по умолчанию
controlsOffset string|number Ширина отступа для элементов управления. По умолчанию равна значения заданному в labelWidth
fieldWidth string|number Ширина для полей формы по умолчанию
readonly bool false Признак для отображения формы в виде только для чтения
validate bool false Признак для необходимости валидации полей формы перед ее отправкой
successLoadUrl string '' Адрес куда будет перенаправлен пользователь после успешного выполнения формы. Может содержать переменные вида [response.id], где id это значение json объекта, который пришел в ответе после отправки формы.
errorClass string Css классы которые будут добавлены в сообщение об ошибке
layout string [position_default] Макет с html разметкой для настройки внешнего вида формы
record object Объект с данными которые будут помещены в поля формы для их изменения и сохранения
fields array Массив полей для отображения их на форме
controls array Массив элементов управления для отображения их на форме
onSubmit function|string Событие выполняемое перед отправкой формы. В случае если метод вернет значение false, то отправка формы будет остановлена.
onSubmitSuccess function|string Событие выполняемое при успешной отправке формы

Methods

Method Return Description 
let form = CoreUI.form.create( options )
 CoreUI.form.instance Метод для создания экземпляра формы 
let form = CoreUI.form.get( formId )
 CoreUI.form.instance Получение ранее созданного экземпляра формы 
CoreUI.form.setSettings( settings )
 Установка некоторых настроек по умолчанию для создаваемых форм 
CoreUI.form.getSetting( name )
 mixed Получение значения установленной настройки по умолчанию для создаваемых форм 
form.render( elementId )
 string|void Формирование html таблицы и размещение его если указан dom элемент. Если элемент не указан, то метод возвращает сформированный html 
form.initEvents()
 Инициализирует события необходимые для корректной работы формы. Требует обязательного вызова, если при рендере формы не был указан элемент для вставки (elementId) 
form.getId()
 string Получение id формы 
form.getOptions()
 object Получение настроек формы 
form.getRecord()
 object Получение исходных данных редактируемой записи 
form.getData()
 object Получение данных полученных при редактировании формы 
form.getFields()
 array Получение всех проинициализированных экземпляров полей формы 
form.getControls()
 array Получение всех проинициализированных экземпляров элементов управления формой 
form.getGroups()
 array Получение всех проинициализированных экземпляров групп полей формой 
form.getField( name )
 object Получение проинициализированного экземпляра поля формы по его названию 
form.readonly( isReadonly )
 Смена состояния "только для чтения" для всех полей формы 
form.validate()
 bool Проведение проверки на корректность во всех полях формы 
form.showControls()
 Показ всех элементов управления 
form.hideControls()
 Скрытие всех элементов управления 
form.showError( message, options )
 Показ сообщения с ошибкой над формой 
form.hideError()
 Скрытие сообщения с ошибкой над формой 
form.on( name, callback )
 Регистрация функции вызываемой при наступлении указанного события 
form.lock()
 Блокирование отправки формы 
form.unlock()
 Разблокирование отправки формы 
form.send()
 Отправка данных формы по указанному адресу 
form.destruct()
 Уничтожение формы

Field methods

Method Return Description 
field.readonly( isReadonly )
 Смена состояния "только для чтения" для поля 
field.validate( isValid, message)
 Установка состояния валидности поля. При необходимости можно указать сообщение с деталями ошибки или успешного состояния 
field.isValid()
 bool Проверка поля на валидность 
field.getOptions()
 object Получение исходных настроек поля 
field.show( duration )
 Показ поля 
field.hide( duration )
 Скрытие поля 
field.getValue()
 mixed Получение значения поля 
field.setValue( value )
 Установка значения поля

Group methods

Method Return Description 
group.getOptions()
 object Получение исходных настроек группы 
group.expand( duration )
 Показ содержимого группы 
group.collapse( duration )
 Скрытие содержимого группы

Control methods

Method Return Description 
control.getOptions()
 object Получение исходных настроек элемента управления 
control.show( duration )
 Показ элемента управления 
control.hide( duration )
 Скрытие элемента управления

Events

Event Type Description
show Показ формы на странице. Происходит один раз при отображении
send Выполняется перед отправкой данных формы.
В качестве параметров передаются form.on('send', function (form, data).
Если функция вернет false, то отправка будет прекращена
send_start Выполняется перед началом запроса для отправки данных формы.
В качестве параметров передаются form.on('send_start', function (form, xhr)
send_success Выполняется после успешного запроса для отправки данных формы.
В качестве параметров передаются form.on('send_success', function (form, result)
send_error Выполняется после не успешного запроса для отправки данных формы.
В качестве параметров передаются form.on('send_error', function (form, xhr, textStatus, errorThrown)
send_end Выполняется после запроса для отправки данных формы.
В качестве параметров передаются form.on('send_end', function (form, xhr, textStatus)
modal_load_before Выполняется перед началом запроса для получения данных для модала.
В качестве параметров передаются form.on('modal_load_before', function (modal, xhr)
modal_load_success Выполняется после успешного запроса для получения данных для модала.
В качестве параметров передаются form.on('modal_load_success', function (modal, result)
modal_load_error Выполняется после не успешного запроса для получения данных для модала.
В качестве параметров передаются form.on('modal_load_error', function (modal, xhr, textStatus, errorThrown)
modal_load_complete Выполняется после запроса для получения данных для модала.
В качестве параметров передаются form.on('modal_load_complete', function (modal, xhr, textStatus)
modal_select Выполняется при нажатии на кнопку открытия модала.
В качестве параметров передаются form.on('modal_select', function (modal, event)
modal_clear Выполняется при очистке выбранного значения в модале.
В качестве параметров передаются form.on('modal_clear', function (modal, event)