[SOLVED] Validate whole form with one function

maxxiris

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

metalsadman

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

maxxiris

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' });       
    }
  })

maxxiris

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

PeterQF

Any working code? Also struggling with this.

Hawkeye64

@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' });       
    })

metalsadman

@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

Hawkeye64

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.

PeterQF

Following your instructions gives me:

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

any idea why?

PeterQF

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

Sorry!

PeterQF

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.

PeterQF

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?

No More Posting New Topics!

[SOLVED] Validate whole form with one function