2016-07-26 22:55:29 +00:00
|
|
|
<template>
|
|
|
|
|
<section v-md-theme="'blue'">
|
2016-08-01 05:45:40 +00:00
|
|
|
<validator name="validation">
|
|
|
|
|
<form novalidate @submit.stop.prevent="submit">
|
|
|
|
|
<md-input-container>
|
|
|
|
|
<label>Initial value</label>
|
|
|
|
|
<md-input value="My initial value"></md-input>
|
|
|
|
|
</md-input-container>
|
|
|
|
|
|
|
|
|
|
<md-input-container md-inline>
|
|
|
|
|
<label>Inline field</label>
|
|
|
|
|
<md-input></md-input>
|
|
|
|
|
</md-input-container>
|
|
|
|
|
|
|
|
|
|
<md-input-container>
|
|
|
|
|
<label>Required</label>
|
2016-08-02 05:05:32 +00:00
|
|
|
<md-input required v-validate:inline="['required']" initial="off"></md-input>
|
2016-08-01 05:45:40 +00:00
|
|
|
|
|
|
|
|
<span class="md-error">Validation message</span>
|
|
|
|
|
</md-input-container>
|
|
|
|
|
|
|
|
|
|
<md-input-container>
|
|
|
|
|
<label>Disabled</label>
|
|
|
|
|
<md-input disabled></md-input>
|
|
|
|
|
</md-input-container>
|
|
|
|
|
|
|
|
|
|
<md-input-container md-has-password>
|
|
|
|
|
<label>Passwords</label>
|
2016-08-02 04:20:35 +00:00
|
|
|
<md-input type="password"></md-input>
|
2016-08-01 05:45:40 +00:00
|
|
|
</md-input-container>
|
|
|
|
|
|
|
|
|
|
<md-input-container>
|
|
|
|
|
<label>Textarea</label>
|
|
|
|
|
<md-textarea></md-textarea>
|
|
|
|
|
</md-input-container>
|
|
|
|
|
|
2016-08-02 04:20:35 +00:00
|
|
|
<md-input-container>
|
|
|
|
|
<label>Character counter</label>
|
|
|
|
|
<md-textarea maxlength="70" v-validate:counter="{ maxlength: 70 }" initial="off"></md-textarea>
|
|
|
|
|
|
|
|
|
|
<span class="md-error">Max length reached</span>
|
|
|
|
|
</md-input-container>
|
|
|
|
|
|
2016-08-01 05:45:40 +00:00
|
|
|
<md-button type="submit" class="md-primary md-raised">Validate</md-button>
|
|
|
|
|
</form>
|
|
|
|
|
</validator>
|
2016-07-26 22:55:29 +00:00
|
|
|
</section>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
section {
|
|
|
|
|
margin: 24px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2016-08-01 05:45:40 +00:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
methods: {
|
|
|
|
|
submit() {
|
|
|
|
|
this.$validate(true);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|