1

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>

3
  • No deberia estar esto componentizado? y cada componente validarse por separado?
    – gbianchi
    el 15 abr. 2018 a las 17:05
  • Pues al utilizar el "app.$validator.validateAll().then((result)...." al parecer y valga la redundancia valida absolutamente todos los inputs que tengan el v-validate
    – Villatoro
    el 15 abr. 2018 a las 17:08
  • Exacto.. en la documentacion dice que tenes que usar scopes, para saber que validacion estas aplicando...
    – gbianchi
    el 15 abr. 2018 a las 18:27

1 respuesta 1

1

Segun el componente, para validar varios modelos debes usar un scope

Para ello, basta con agregar a cada componente a validar data-vv-scope y un nombre, y al llamar a la funcion de validacion, pedirle que valide solamente ese scope.

this.$validator.validateAll(scope).then((result)

En tu ejemplo, bastaria con hacer (solo incluyo una parte):

<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" data-vv-scope="validar1">
            <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" data-vv-scope="validar1">
            <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>

Y al hacer la validacion:

validateOne:function(){
    app.$validator.validateAll("validar1").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}); 
        }
    });
},

Link a la documentacion

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.