Tengo la duda de como poder validar por separado formularios en la misma página, utilizando Vue.js y su libreria VeeValidate, he estado haciendo pruebas pero no encuentro como acceder hasta el valor de cada input
o poder englobar, por así decirlo, ciertos inputs para que solo valide esos, ya que toma en cuenta todos los inputs que estén con VeeValidate.
En el ejemplo que he realizado tengo dos formularios en la misma página y quiero validarlos por separado, ya que si por ejemplo doy click en aceptar dentro del form2, estando los campos del form1 vacios, da error aunque este bien escrito el email y viceversa, También anexo un ejemplo en codepen por si les es mas cómodo.
Vue.use(VeeValidate);
var app = new Vue({
el: "#root_vee_validate",
data:{
exmp_basico: {},
exmp_email: {},
},
methods: {
validateOne:function(){
app.$validator.validateAll().then((result) => {
if (result) {
swal( {title:"Exito!", text:"Campos llenos!", icon:"success", button:"Aceptar", closeOnClickOutside:false});
}else {
swal( {title:"Error!", text:"Campos vacios!", icon:"error", button:"Aceptar", closeOnClickOutside:false});
}
});
},
validateTwo:function(){
app.$validator.validateAll().then((result) => {
if (result) {
swal( {title:"Exito!", text:"Email electronico correcto!", icon:"success", button:"Aceptar", closeOnClickOutside:false});
}else {
swal( {title:"Error!", text:"Email no valido!", icon:"error", button:"Aceptar", closeOnClickOutside:false});
}
});
}
}
});
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>
<div class="container-fluid" id="root_vee_validate">
<div class="row">
<div class="col m10 offset-m1">
<div class="col s12 m12">
<div class="card-panel hoverable blue lighten-4">
<div class="row">
<h4 class="title">Ejemplo basico - form1</h4>
<form>
<div class="row">
<!---->
<div class="input-field col s6 l6">
<input type="text" name="nombres" v-validate="'required|alpha_spaces'" :class="{'input': true, 'is-danger': errors.has('exmp_basico.nombres') }" v-model="exmp_basico.nombres">
<label>Nombres</label>
<i v-show="errors.has('nombres')" class="fa fa-warning"></i>
<span v-show="errors.has('nombres')" class="help is-danger">{{ errors.first('nombres') }}</span>
</div>
<div class="input-field col s6 l6">
<input type="text" name="apellidos" v-validate="'required|alpha_spaces'" :class="{'input': true, 'is-danger': errors.has('exmp_basico.apellidos') }" v-model="exmp_basico.apellidos">
<label>Apellidos</label>
<i v-show="errors.has('apellidos')" class="fa fa-warning"></i>
<span v-show="errors.has('apellidos')" class="help is-danger">{{ errors.first('apellidos') }}</span>
</div>
<div class="row">
<div class="input-field col s12 center-align">
<a class="btn btn-blue" v-on:click="validateOne">Aceptar</a>
</div>
</div>
<!---->
</div>
</form>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card-panel hoverable blue lighten-4">
<div class="row">
<h4 class="title">Ejemplo con email - form2</h4>
<form>
<div class="row">
<!---->
<div class="input-field col s12">
<input type="text" name="email" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('exmp_email.email') }" v-model="exmp_email.email">
<label>Email</label>
<i v-show="errors.has('email')" class="fa fa-warning"></i>
<span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
</div>
<div class="row">
<div class="input-field col s12 center-align">
<a class="btn btn-blue" v-on:click="validateTwo">Aceptar</a>
</div>
</div>
<!---->
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script src='https://unpkg.com/sweetalert/dist/sweetalert.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js'></script>