[framework7-vue] How to validate form in framework7-vue?

Questions
1

The code is basically same as the example in login screen of Framework7-vue.

<template>
    <f7-page no-toolbar no-navbar no-swipeback login-screen>
        <f7-login-screen-title>Login</f7-login-screen-title>
        <f7-list form ref="form" class="">
            <f7-list-input
                ref="myInput"
                label="Username"
                type="text"
                placeholder="Your username"
                :value="username"
                @input="username = $event.target.value"
                validate
                required
            ></f7-list-input>
            <f7-list-input
                label="Password"
                type="password"
                placeholder="Your password"
                :value="password"
                @input="password = $event.target.value"
                validate
                required
            ></f7-list-input>
            <f7-list>
                <f7-list-button type="submit" @click="signIn">
                    Sign In
                </f7-list-button>
            </f7-list>
        </f7-list>
    </f7-page>
</template>
<script>
import {
    f7Page,
    f7LoginScreenTitle,
    f7List,
    f7ListItem,
    f7ListButton,
    f7BlockFooter,
    f7ListInput
} from "framework7-vue";

export default {
    components: {
        f7Page,
        f7LoginScreenTitle,
        f7List,
        f7ListItem,
        f7ListButton,
        f7BlockFooter,
        f7ListInput
    },
    data() {
        return {
            username: "",
            password: ""
        };
    },
    methods: {
        signIn() {
            const self = this;
            const app = self.$f7;
            const router = self.$f7router;
            console.log([...this.$refs.form.$el]);

            // app.input.validateInputs("form")
        }
    }
};
</script>

In the method signIn, I send ajax request after check the validity of entire form, the question is how to get it?
app.input.validateInputs("form") just trigger the validation, doesn’t return result.

Array.from(this.$refs.form.$el).forEach(e=>{ 
  // check every input validity
})

This is one way that I think above.
Is there any solutions better?
Except partten way, Can I use custom validator?
Do we have some solutions like async-validator style?

2

This validation is only visual thing and marks invalid fields with RED. It doesn’t return anything. In Vue you can just check validity of username and password like you need, e.g.:

const isValid = this.username && this.password
3

Thanks for your reply.
I think I need to add third-party package for more functional validation