Vuelidate: how to validate two different forms in one page by vuelidate?

[mortezasabihi]

in my vue project, i used two form for sign up and sign in for authenticatin. but i have problem with multiple form validation by vuelidate.
when sign up form validate, the sign in form is validated automatically.

i wrote different datas for sign in and sign up form and i used v-model.

``` data(){
return {
r_email: '',
r_password: '',
l_email: '',
l_password: '',
remember: false,
options: [
{text: 'Remember me!', value: 'remember'},
]
}
}

validation:

``` validations: {
            r_email: {
                required,
                email
            },
            r_password: {
                required,
                strongPassword
            },
            l_email: {
                required,
                email
            },
            l_password: {
                required,
                strongPassword
            }
        }

register form:

```

Register

label-for="r-email"
description="We'll never share your email with anyone else.">
type="email"
@blur.native="$v.r_email.$touch()"
v-model="r_email"
placeholder="Enter email"
:class="{'is-invalid': $v.r_email.$error, 'is-valid': !$v.r_email.$error && $v.r_email.$dirty}">

Email is require

Enter correct email address

label-for="r-password">
type="password"
@blur.native="$v.r_password.$touch()"
v-model="r_password"
placeholder="Enter Password"
:class="{'is-invalid': $v.r_password.$error, 'is-valid': !$v.r_password.$error && $v.r_password.$dirty}">

Password is require

Password must contains:
At least one upper case English letter,
At least one lower case English letter,
At least one digit character,
At least one special character
And minimum eight in character

Register

-->

login form: 

```<!-- login-modal -->
        <b-modal id="loginModal" hide-footer title="Sign in to your account">
            <b-form @submit.prevent="login">
                <div class="d-block">
                    <h3 class="text-center">Login</h3>
                    <b-form-group label="Email address:"
                                  label-for="l-email">
                        <b-form-input id="l-email"
                                      type="email"
                                      @blur.native="$v.l_email.$touch()"
                                      v-model="l_email"
                                      placeholder="Enter email"
                                      :class="{'is-invalid': $v.l_email.$error, 'is-valid': !$v.l_email.$error && $v.l_email.$dirty}">
                        </b-form-input>
                        <div class="invalid-feedback" v-if="!$v.l_email.required && $v.l_email.$dirty">Email is require</div>
                        <div class="invalid-feedback" v-if="!$v.l_email.email && $v.l_email.$dirty">Enter correct email address</div>
                    </b-form-group>
                    <b-form-group label="Password:"
                                  label-for="l-password">
                        <b-form-input id="l-password"
                                      type="password"
                                      @blur.native="$v.l_password.$touch()"
                                      v-model="l_password"
                                      placeholder="Enter Password"
                                      :class="{'is-invalid': $v.l_password.$error, 'is-valid': !$v.l_password.$error && $v.l_password.$dirty}">
                        </b-form-input>
                        <div class="invalid-feedback" v-if="!$v.l_password.required && $v.l_password.$dirty">Password is require</div>
                        <div class="invalid-feedback" v-if="!$v.l_password.strongPassword && $v.l_password.$dirty">
                            Password must contains:
                            At least one upper case English letter,
                            At least one lower case English letter,
                            At least one digit character,
                            At least one special character
                            And minimum eight in character
                        </div>
                    </b-form-group>
                    <b-form-group>
                        <b-form-checkbox-group v-model="remember" name="remember" :options="options">
                        </b-form-checkbox-group>
                    </b-form-group>
                </div>
                <b-btn class="mt-3" type="submit" variant="outline-primary" block>Login</b-btn>
            </b-form>
        </b-modal>
        <!-- /login-modal -->

[mortezasabihi]

problem solved:

 methods: {
            register(){
                this.$v.r_email.$touch();
                this.$v.r_password.$touch();
                if (!this.$v.r_email.$invalid || !this.$v.r_password.$invalid) {
                    alert('You are successfully registered');
                }
            },
            login(){
                this.$v.l_email.$touch();
                this.$v.l_password.$touch();
                if (!this.$v.l_email.$invalid || !this.$v.l_password.$invalid) {
                    alert('You are successfully logged in');
                }
            }
        },

[bogdan-dubyk]

what if I have a lot of the fields of each form, around 15 fields. It's odd to add a validation check for each field. Maybe there is a way to validate by form name or ref?

[shentao]

And how should each of those fields know what are the validation rules for them? You need to define the rules, always. If you don't want to repeat yourself, save the rules object to a variable.