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.

If this doesnā€™t work, you can use a vue validation plugin for the validation of the form without any errors. This will reduce the amount of work done and you can save time. Some vue plugins for that are Vuetify, Vee, and Vue-form-generator.

1 Like