[SOLVED] Validate whole form with one function



  • This is from doc for Internal form validation

    onSubmit () {
      this.$refs.name.validate()
      this.$refs.age.validate()
    
      if (this.$refs.name.hasError || this.$refs.age.hasError) {
        this.formHasError = true
      }
    

    This method is not good in production when we have large form. So anyway we could run validate function on form ref for validating the whole form.

    Tks for any help



  • @maxxiris wrap your form components ie. Qinput, qselect etc. In a QForm https://quasar.dev/vue-components/form#Usage.



  • Tks for your quick reply, I make a test and stuck with a weird issue. If form is not validate, It does not run into else case (launch notify this.$q.notify({ color: ‘orange’, message: ‘Please enter required field’ }); )

      this.$refs.loginForm.validate().then(success => {
        if (success) {
    
          auth.login(loginData).then(err => {        
            this.loading = false;
            // and we can't log the user in.
            if (err) {
              // We use Quasar's notify plugin to display these neat
              this.$q.notify({ color: 'negative', message: err });
              return;
            }
            // Otherwise we let the user know they've been logged in...
            this.$q.notify({ color: 'positive', message: 'You have been successfully logged in.' });
            // ...and redirect them to the index.
            this.$router.push('/');
          });  
    
        }else{
          // oh no, user has filled in
          this.$q.notify({ color: 'orange', message: 'Please enter required field' });       
        }
      })


  • When using this.$refs.loginForm.validate() we must do it with a button @click method to have access to true and false of validate data instead of using QForm @submit='login()'. Eg:

    <q-form @remove='remove()' ref='loginForm' > <q-btn color="blue" icon="fire" @click="sendForm" label="Login" /> </q-form>

    `methods: {

    sendForm(){
    
     let vm = this;
    
        this.$refs.loginForm.validate().then( function(success) {
    
               vm.$q.notify({ color: 'positive', message: 'You have been successfully logged in.' });
            }else{
                vm.$q.notify({ color: 'red', message: 'Please enter required field' });       
            }
            
    
        })
    

    }`

    Using @submit='sendForm()' we will not access to false case of validate. Function will return if form fails to validate



  • Any working code? Also struggling with this.



  • @maxxiris @PeterQF
    validate() returns a promise, so use then/catch

    let vm = this;
    this.$refs.loginForm.validate()
        .then(success => {
            vm.$q.notify({ color: 'positive', message: 'You have been successfully logged in.' });
        })
        .catch(err => {
            vm.$q.notify({ color: 'red', message: 'Please enter required field' });       
        })
    


  • @Hawkeye64 i think peeps meant validating all the wrapped form components inside when you call submit, atm (seeing the code), validation returns prematurely if an error occurs at the top, skipping other proceeding form input. can be seen in the basic example. https://quasar.dev/vue-components/form#Example--Basic



  • The code is wrong in one of the examples above. I was just correcting it. there’s an else, with no if, and you use .catch for a promise error.



  • Following your instructions gives me:

    TypeError: this.$refs.loginForm.validate is not a function
    

    any idea why?



  • Stupid mistake. I missed to ad QForm in conf components: [

    Sorry!



  • Well, still can’t get the error when clicking button even thought field shows error.

    I so wish there was a complete example for this.



  • Got it working like i want.

    Form:

     <q-form ref="form">
                <div class="q-pl-xs q-pt-sm q-pb-lg q-gutter-sm row items-start">
                  <q-btn
                    class="yellow-button"
                    @click="callUpdate()"
                    :loading="submitting"
                    ><q-icon name="save" class="q-pr-xs" /><span class="gt-xs">{{
                      $t('general.functions.save')
                    }}</span>
                  </q-btn>
    ...
    

    methods:

       async callUpdate() {
          this.$refs.form.validate().then(valid => {
            if (!valid) {
              this.$q.notify({
                message: this.$t('checkinput'),
                color: 'red'
              })
            } else {
              this.submitting = true
              this.doUpdatePost(this.postEdit)
              this.submitting = false
            }
          })
        },
    

    is this solution okay?


Log in to reply