I have the following form indicating in each input its validation according to the documentation https://framework7.io/vue/inputs.html
<f7-list form class="no-hairlines" @submit.prevent="login(usuario)">
<!-- Text Input -->
<f7-list-input
outline
label="Usuario"
floating-label
type="text"
:value="usuario.usuario"
@input="usuario.usuario = $event.target.value"
placeholder="Usuario"
clear-button
required
validate
error-message="Debe ingresar usuario"
autocomplete="new-user"
>
<f7-icon slot="media">
<i class="icon f7-icons ios-only">email</i>
<i class="icon material-icons md-only">mail</i>
</f7-icon>
</f7-list-input>
<!-- Password -->
<f7-list-input
outline
label="Contraseña"
floating-label
placeholder="Contraseña"
:type="show1 ? 'text' : 'password'"
:value="usuario.password"
@input="usuario.password = $event.target.value"
clear-button
autocomplete="new-password"
required
validate
error-message="Debe ingresar contraseña"
>
<f7-icon slot="media">
<i class="icon f7-icons ios-only">lock</i>
<i class="icon material-icons md-only">lock</i>
</f7-icon>
</f7-list-input>
<f7-block class="text-align-center">
<f7-button type="submit" large fill>Iniciar sesion</f7-button>
<a href="/recuperarpass/">¿Olvidaste tu contraseña?</a>
</f7-block>
<f7-block>
<f7-button large fill class="button-social brand-bg-color-facebook">
<i class="fab fa-fw fa-lg fa-facebook-f"></i>
<span>Continua con facebook</span>
</f7-button>
</f7-block>
<f7-block class="text-align-center">
<f7-link @click="$f7router.navigate('/registrarCuenta/')" >Crear una cuenta</f7-link>
<f7-link @click="$f7router.navigate('/')" >Continuar sin iniciar sesión</f7-link>
</f7-block>
</f7-list>
Effectively at the beginning the validation is done well: Example of the input: before validating:
Input validating:
Wen entering a text so that it disappears that it is mandatory to enter text, the following happens:
The shadow disappears in red, but the text “You must enter a name” remains.
main.js:
// Import Vue
import Vue from 'vue';
import firebase from 'firebase';
import VueObserveVisibility from 'vue-observe-visibility'
// Import Framework7
//import Framework7 from 'framework7/framework7.esm.bundle';
import Framework7 from './assets/vendor/framework7/js/framework7.min.js';
// Import Framework7 Vue
import Framework7Vue from 'framework7-vue';
// Import F7 Style
//import Framework7CSS from 'framework7/css/framework7.bundle.min.css';
import Framework7CSS from './assets/vendor/framework7/css/framework7.min.css';
// Import F7 iOS Icons
//import Framework7Icons from 'framework7-icons/css/framework7-icons.css';
import FontAwesome from './assets/vendor/font-awesome/css/all.css';
import Framework7Icons from './assets/vendor/framework7-icons/css/framework7-icons.css';
import Framework7Keypad from './assets/vendor/framework7-plugins/keypad/framework7.keypad.min.css';
import Framework7Hamburgers from './assets/vendor/hamburgers/hamburgers.min.css';
import MaterialIcons from './assets/vendor/material-icons/material-icons.css';
import JqueryRateyo from './assets/vendor/rateyo/jquery.rateyo.min.css';
import Timedropper from './assets/vendor/timedropper/timedropper.min.css';
import Nectar from './assets/vendor/nectar/nectar.css';
import Custom from './assets/custom/css/custom.css';
import * as FavIcon from './assets/custom/favicon/favicon-32x32.png'; //Pendiente validar si fue bien exportado
import InstantSearch from 'vue-instantsearch';
//import json from "./static/manifest.json";
// Import Material Icons
//import MaterialIcons from 'material-design-icons/iconfont/material-icons.css';
// Import Fontawesome Theme Styles
//import FontAwesome from '@fortawesome/fontawesome-free/css/all.min.css';
// Import fastClick
import FastClick from 'fastclick';
// Import App Custom Styles
import AppStyles from './assets/sass/main.scss';
// Import App Component
import app from './main.vue';
// Import Vuex Storage
import store from './assets/vuex/storage.js';
// Different F7-Vue plugin initialization with f7 v3.0
Framework7.use(Framework7Vue);
Vue.use(InstantSearch);
Vue.use(VueObserveVisibility);
//Framework7.use(Framework7CSS);
//Framework7.use(Framework7Icons);
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAcAbbsqu7F4bgSzGp7KoO98KZtVLniNco",
authDomain: "servido-3c4e6.firebaseapp.com",
databaseURL: "https://servido-3c4e6.firebaseio.com",
projectId: "servido-3c4e6",
storageBucket: "servido-3c4e6.appspot.com",
messagingSenderId: "714454512647",
appId: "1:714454512647:web:9ce329cb7a009fa5"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
let createdApp = false;
firebase.auth().onAuthStateChanged(function (user) {
/* eslint-disable no-new */
if (!createdApp) {
console.log("ESTA LOGUEADO ARCHIVO MAIN.JS");
new Vue({
// Root Element
el: '#app',
store,
render: c => c('app'),
components: {
app
},
mounted() {
window.addEventListener('load', () => {
// run after everything is in-place
FastClick.attach(document.body);
});
},
});
createdApp = true;
}
});
What could be the error? since when entering text the text must disappear as well.
Thank you.