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. -
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?
-
: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'; 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>