Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Email validation using quasar itself

    Framework
    3
    6
    880
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      amoss last edited by

      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 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @amoss last edited by 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.

        1 Reply Last reply Reply Quote 0
        • A
          amoss last edited by 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 1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman @amoss last edited by 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

            1 Reply Last reply Reply Quote 2
            • A
              amoss last edited by 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

              1 Reply Last reply Reply Quote 0
              • T
                tunchamroeun last edited by

                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>
                
                1 Reply Last reply Reply Quote 0
                • First post
                  Last post