Skinny Widgets Form for Jquery Theme

form element

``
npm i sk-form sk-form-jquery --save
`

Quasi-form element that sends it's fields as FormData (multipart request),

attributes are the same as for form element type

to have data submission working sk-form must have sk-button with type="submit" inside

supported form element types:

sk-input, sk-checkbox, sk-select, sk-datepicker, input, textarea

if novalidate attribute is not set validation is performed on submit

if validation is not passed forminvalid event is emitted with info in event.detail.errors

if validation successfull formvalid event is emitted and form attempts to send data

it throws formsubmitsuccess event on 200 or any success response

and formsubmiterror

request/response data is stored in event.detail.request callback argument field

`html



First Name


Second Name


Address

Single

Male
Female


Submit






`

$3

while bootstrap process sk-form lookups for all internal button and sk-button elements with and bind
them with callback by name or as firing events (see similar sk-dialog functionality for examples). So you can extend
form with your own button triggered logic.

$3

You can bind custom validation function for every field:

`html

First Name
`

form-validation attribute specifies validation function name, it can be binded to global (window) or field class.
Validation function returns error message or validation key to load from form-validation-msg or true in case value is valid.

To enable validation labels display use validation-label attribute of an element or sk-form, use value "disabled" to
force it's switch off.

no-live-validation attribute disables field revalidation on input

$3

You can use response-validation sk-form attribute or define 'validateResponse' method to provide post-submit validator
for cases when backend can return validation result json. Xml Http Request Event will be passed as argument of this method and
formsubmitsuccess or formsubmiterror events will be triggered depending on validator function execution result.
As it is called with form context you can use form methods or resources to indicate error.

`html
theme="jquery"
base-path="/node_modules/sk-core/src"
theme-path="/node_modules/sk-theme-jquery"
lang="ru"
id="myConfig"
>


Apple
Banana
Lemon

Checkbox
My Input

Submit


`

where response is like:

`json
{
"fieldErrors": {
"myInput": [
"Hey, your input is invalid !"
]
},
"result": "error"
}
``

#### template

id: SkFormTpl