skinny-widgets
Version:
skinnable web components widgets collection
88 lines (85 loc) • 3.24 kB
HTML
<head>
<link rel="shortcut icon" href="#" />
</head>
<body class="sk-auto sk-theme-jquery sk-auto-notpl">
<script>
const loadTemplates = async () => {
const response = await fetch('/dist/jquery.templates.html')
.then(response => response.text())
.then(text => document.body.insertAdjacentHTML('beforeend', text));
};
loadTemplates();
</script>
<script src="/dist/sk-compat-bundle.js"></script>
<sk-config
theme="jquery"
base-path="/src"
lang="en"
id="myConfig"
></sk-config>
<sk-alert closable type="error">Alarm ! Alarm !</sk-alert>
<script>
function validateField(el) {
console.log('validateField', el);
if (el.getAttribute('value') == '2') {
return true;
} else {
return false;
}
}
</script>
<sk-form action="/submit" method="POST" id="myForm" validation-label>
<span slot="fields">
<div class="field-wrapper">
<input name="nativeField" id="formInput0" />
</div>
<div class="field-wrapper">
<sk-input name="firstName" id="formInput1" sk-pattern="^[A-Za-z]+$" sk-required validation-label>First Name</sk-input>
</div>
<!-- <div class="field-wrapper">
<sk-datepicker name="birthDate" id="formInput11" form-validation="validateField" validation-label>Some date</sk-datepicker>
</div>
<div class="field-wrapper">
<sk-input name="secondName" id="formInput2" form-validation="validateField">Second Name</sk-input>
</div>
<div class="field-wrapper">
<sk-input name="info" id="formInput3" form-validation="validateField">Info</sk-input>
</div>
<div class="field-wrapper">
<sk-checkbox name="isSingle" id="formCheckbox" form-validation="validateField">Single</sk-checkbox>
</div>
<div class="field-wrapper">
<sk-select name="gender" id="formSelect" form-validation="validateField">
<option value="">--</option>
<option value="male">Male</option>
<option value="female">Female</option>
</sk-select>
</div>
<div class="field-wrapper">
<sk-switch required value="11" form-validation="validateField"></sk-switch>
</div>
<div class="field-wrapper">
<textarea name="address" required form-validation="validateField"></textarea>
</div>-->
<div class="field-wrapper">
<sk-button id="formButton" type="submit" button-type="primary">
<span slot="label">Submit</span>
</sk-button>
</div>
</span>
</sk-form>
<script type="module">
myForm.addEventListener('formsubmitsuccess', (event) => {
console.log('form submit success handled', event);
});
myForm.addEventListener('formsubmiterror', (event) => {
console.log('form submit error handled', event);
});
myForm.addEventListener('formvalid', (event) => {
console.log('form valid handled', event);
});
myForm.addEventListener('forminvalid', (event) => {
console.log('form invalid handled', event);
});
</script>
</body>