sk-form-default
v0.2.27
Published
skinny-widgets form element for default theme
Downloads
194
Readme
Skinny Widgets Form for Default 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
<sk-form action="/submit" method="POST" id="myForm">
<span slot="fields">
<sk-input name="firstName" id="formInput1">
<span slot="label">First Name</span>
</sk-input>
<sk-input name="secondName" id="formInput2">
<span slot="label">Second Name</span>
</sk-input>
<sk-input name="address" id="formInput3">
<span slot="label">Address</span>
</sk-input>
<sk-checkbox name="isSingle" id="formCheckbox"><span slot="label">Single</span></sk-checkbox>
<sk-select name="gender" id="formSelect">
<option value="male">Male</option>
<option value="female">Female</option>
</sk-select>
<sk-button id="formButton" type="submit" button-type="primary">
<span slot="label">Submit</span>
</sk-button>
</span>
</sk-form>
<script type="module">
import { SkButton } from '/node_modules/sk-button/src/sk-button.js';
import { SkInput } from '/node_modules/sk-input/src/sk-input.js';
import { SkSelect } from '/node_modules/sk-select/src/mysk-select.js';
import { SkForm } from '/node_modules/sk-form/src/sk-form.js';
import { SkCheckbox } from '/node_modules/sk-checkbox/src/sk-checkbox.js';
customElements.define('sk-button', SkButton);
customElements.define('sk-input', SkInput);
customElements.define('sk-select', SkSelect);
customElements.define('sk-form', SkForm);
customElements.define('sk-checkbox', SkCheckbox);
myForm.addEventListener('formsubmitsuccess', (event) => {
console.log('form submit success handled', event);
});
myForm.addEventListener('formsubmiterror', (event) => {
console.log('form submit error handled', event);
});
</script>
Action buttons
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.
Field Validation
You can bind custom validation function for every field:
<script>
function validateFirstName(el) {
if (el.value == '1') {
return true;
} else {
return 'Wrong value';
}
}
</script>
<sk-input name="firstName" id="formInput1" form-validation="validateFirstName" form-validation-msg="{'someError': 'This field has some error'}">First Name</sk-input>
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
Backend validation
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.
<sk-config
theme="jquery"
base-path="/node_modules/sk-core/src"
theme-path="/node_modules/sk-theme-jquery"
lang="ru"
id="myConfig"
></sk-config>
<script type="module">
import { SkCheckbox } from './node_modules/sk-checkbox/src/sk-checkbox.js';
import { SkButton } from './node_modules/sk-button/src/sk-button.js';
import { SkConfig } from './node_modules/sk-config/src/sk-config.js';
import { SkSelect } from './node_modules/sk-select/src/sk-select.js';
import { SkInput } from './node_modules/sk-input/src/sk-input.js';
import { SkForm } from './node_modules/sk-form/src/form/sk-form.js';
customElements.define('sk-config', SkConfig);
customElements.define('sk-checkbox', SkCheckbox);
customElements.define('sk-button', SkButton);
customElements.define('sk-select', SkSelect);
customElements.define('sk-input', SkInput);
customElements.define('sk-form', SkForm);
myForm.addEventListener('formsubmitsuccess', (event) => {
console.log('form submit success handled', event);
});
myForm.addEventListener('formsubmiterror', (event) => {
console.log('form submit success handled', event);
});
myForm.responseValidator = function(event) {
let errors = event.response.fieldErrors;
if (errors) {
for (let fieldName of Object.keys(errors)) {
let field = this.querySelector(`[name='${fieldName}']`);
if (field) {
let message = '';
if (Array.isArray(errors[fieldName])) {
message = errors[fieldName].join(' ');
} else {
message = errors[fieldName];
}
field.setCustomValidity(message);
this.impl.renderFieldInvalid(field);
}
}
}
// remove error indication from valid fields
let fields = this.impl.queryFields();
for (let field of fields) {
let fieldName = field.getAttribute('name');
if (fieldName && ! errors[fieldName]) {
this.impl.renderFieldValid(field);
}
}
};
</script>
<sk-form id="myForm" action="/submit" method="POST" response-validation="responseValidator" validation-label>
<sk-select id="skSelect2" name="skSelect2" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="lemon">Lemon</option>
</sk-select>
<sk-checkbox id="myCheckbox" name="myCheckbox">Checkbox</sk-checkbox>
<sk-input id="myInput" name="myInput">My Input</sk-input>
<sk-button id="formButton" type="submit" button-type="primary">Submit</sk-button>
</sk-form>
where response is like:
{
"fieldErrors": {
"myInput": [
"Hey, your input is invalid !"
]
},
"result": "error"
}
template
id: SkFormTpl