Email validation using quasar itself

  • 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)…

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

  • @amoss

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

    see, that’s example how to supply a custom validation function, doesn’t need to use Promises in your case.

  • 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?

  • @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';

  • 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';
              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?


Log in to reply