api-console-assets
Version:
This repo only exists to publish api console components to npm
151 lines (132 loc) • 4.08 kB
HTML
<!--
@license
Copyright 2017 Mulesoft.
All rights reserved.
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>anypoint-validator-behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="cats-only.html">
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container {
max-width: 600px;
}
h1 {
margin-left: 30px;
}
.centered {
padding: 0;
}
.valid {
color: var(--google-green-500);
}
.invalid {
color: var(--google-red-500);
}
fieldset {
background-color: var(--google-grey-100);
border: none;
margin: 10px 0;
padding: 10px 30px;
}
legend {
float: left;
width: 100%;
}
input,
select {
padding: 0.4em;
font-size: 16px;
margin: 5px;
}
</style>
</head>
<body unresolved>
<div class="vertical-section-container centered">
<h1><iron-validator-behavior></h1>
<template is="dom-bind">
<cats-only></cats-only>
<fieldset>
<legend>Only type <code>cats</code></legend>
<input on-input="_onInput">
<span class="valid" hidden$="[[!valid]]">valid</span>
<span class="invalid" hidden$="[[valid]]">invalid</span>
</fieldset>
<fieldset>
<legend>Only type <code>cats</code> across both input fields</legend>
<span on-input="_onInputMulti">
<input>
<input>
</span>
<span class="valid" hidden$="[[!validMulti]]">valid</span>
<span class="invalid" hidden$="[[validMulti]]">invalid</span>
</fieldset>
<section>
<form on-submit="_onSubmit">
<fieldset>
<legend>Only type <code>cats</code> in the form</legend>
<label>
Type something: <input name="something">
</label>
<br>
<label>
Your favorite pet:
<select name="pet">
<option>iguanas</option>
<option>cats</option>
<option>pancakes</option>
</select>
</label>
<br>
<button type="submit">submit!</button>
<span class="valid" hidden$="[[!validForm]]">valid</span>
<span class="invalid" hidden$="[[validForm]]">invalid</span>
</fieldset>
</form>
</section>
</template>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
var validator = new Polymer.IronMeta({type: 'validator'}).byKey('cats-only');
var scope = document.querySelector('template[is=dom-bind]');
scope.valid = scope.validMulti = scope.validForm = true;
scope._onInput = function(event) {
this.valid = validator.validate(event.target.value);
event.target.setCustomValidity(validator.message);
};
scope._onInputMulti = function(event) {
var values = [];
var nodes = Polymer.dom(event.currentTarget).querySelectorAll('input');
var i;
var len;
for (i = 0, len = nodes.length; i < len; i++) {
values.push(nodes[i].value);
}
this.validMulti = validator.validate(values);
for (i = 0, len = nodes.length; i < len; i++) {
nodes[i].setCustomValidity(this.validMulti ? '' : validator.message);
}
};
scope._onSubmit = function(event) {
event.preventDefault();
var data = {};
for (var el, i = 0, len = event.target.elements.length; i < len; i++) {
el = event.target.elements[i];
if (el.name) {
data[el.name] = el.value;
}
}
this.validForm = validator.validate(data);
};
});
</script>
</body>
</html>