Email validation using quasar itself

amoss

Hi

I’m newbie to quasar and I want to add an email validation using quasar itself. For now I did the following:

<q-input autofocus square filled v-model="regEmail" type="email" label="email" :rules="[val => !!val || 'Email is missing']"/>

When the email is missing, I get the correct error. I want to add an email validation inside the same mechanism, I guess I need a function to be called from :rules? How?

Also, once I click the login button (for example), how can I make sure to not do anything if one of the above rules are not met? (email missing, password too short, etc)…

Thanks
ps: I posted also in this forum as I might have the wrong forum with my previous posting.

metalsadman

@amoss

rules
Type
Array
Description
Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules

see https://quasar.dev/vue-components/input#Example--Async-rules, that’s example how to supply a custom validation function, doesn’t need to use Promises in your case.

amoss

Thanks! My problem was understanding how to add this check on top of others. I did the following

:rules="[val => !!val || 'Email is missing', isValidEmail(),]"

data () {
  return {      
    regEmail: "",
  }
}

methods: {
  isValidEmail () {
    const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/;
    return emailPattern.test(this.regEmail) || 'Invalid email';
  },
}

Now “email is missing” appears when it should but invalid email never appears. What am I missing?

metalsadman

@amoss

:rules="[val => !!val || 'Email is missing', isValidEmail]"

isValidEmail (val) {
    const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/;
    return emailPattern.test(val) || 'Invalid email';
  }

https://codepen.io/metalsadman/pen/vYErYBe?editors=1010

amoss

Thanks a lot! My mistake was adding () to isValidEmail in the rules section

How can I activate the rules from the start, even before the user focused on the field?

How can I use the same rule for 2 different fields so the error will appear in the correct field?
I tried something like this:

isPassValid() {        
        if (which == 1)
          return this.password.length > 7 || 'Password should be at least 8 characters';
        else
          return this.confirmPassword.length > 7 || 'Confirm password should be at least 8 characters';
      },

but I can’t pass which parameter.

Related: I want to disable the login button until all rules are met. Rules as methods can do the trick or is there a cleaner way?

Thanks

tunchamroeun

If your submit button inside <q-form> just use type=‘email’ it ok

<q-form
          @submit="onSubmit"
          class="q-gutter-md"
        >
          <div class="q-gutter-y-sm">
            <q-input
              class="full-width"
              outlined
              v-model="data.name"
              label="គោត្តនាម-នាម"
              square
              lazy-rules
              :rules="[ val => !!val || 'សូមបំពេញចន្លោះ']"
            />
            <q-input
              class="full-width"
              outlined
              type="email"
              v-model="data.email"
              label="អុីម៉ែល"
              square
              lazy-rules
              :rules="[ val => !!val || 'សូមបំពេញចន្លោះ']"
            />
            <q-btn type="submit" label="រក្សាទុក" class="full-width" color="primary"/>
          </div>
        </q-form>