How to validate a form with framework7 and vuejs?

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:

image

Input validating:

image

Wen entering a text so that it disappears that it is mandatory to enter text, the following happens:

image

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.

Canā€™t replicate it, would be good to see more complete examples. There is no such inputs like on screenshots in the code you have provided

1 Like

I have added my configuration in the main.js file
Thank you very much for the time.