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

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



  • @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.



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

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



  • 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



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

Log in to reply