You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.1 KiB
61 lines
1.1 KiB
<script type="module">
|
|
import {LitElement, html, css} from '/js/lit-core.min.js';
|
|
|
|
class Validator extends LitElement {
|
|
static styles = css`
|
|
.error {
|
|
background-color: red;
|
|
color: white;
|
|
font-size: 4em;
|
|
}`;
|
|
|
|
static properties = {
|
|
failed: {type: Boolean}
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
this.failed == false;
|
|
}
|
|
|
|
status() {
|
|
if(this.failed) {
|
|
return html`<span class="error">Validation Failed!</span>`
|
|
} else {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div @submit=${this._submit}>
|
|
${this.status()}
|
|
<slot></slot>
|
|
</div>`;
|
|
}
|
|
|
|
_submit(e) {
|
|
e.preventDefault();
|
|
|
|
for(let field of e.target.children) {
|
|
if(field.value == "Change Me") {
|
|
this.failed = true;
|
|
break;
|
|
} else {
|
|
this.failed = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('form-validator', Validator);
|
|
</script>
|
|
|
|
<h1>Lit Test</h1>
|
|
|
|
<form-validator>
|
|
<form>
|
|
<input value="Change Me" />
|
|
<input type="submit" value="Submit" />
|
|
</form>
|
|
</form-validator>
|
|
|