Form Validation - Vue

jpbecotte · November 28, 2019, 3:17pm

I am looking thru the doc and it seems very obscure how to deal with form validation. Of course, I found this:
https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic . But I am using Vue.

I assumed I would find some basic «how to». For example, the doc for <ion-item> stipulates that « Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid».

My question is more: How can we set the ion-item to invalid?

For now, all I see is that Ionic is still tightly coupled with Angular.

Any thoughts?

aaronksaunders · November 28, 2019, 4:44pm

here is an example where i used a 3rd party plugin for validation in vue with ionic.

github.com

aaronksaunders/icon-vue/blob/58ed1860a936887fad7b6614ffd14cff476a062a/src/components/Login.vue

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Login</ion-title>
        <ion-buttons slot="end">
          <ion-button clear @click="$router.push('about')">
            <span>About</span>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content padding>
      <form novalidate>
        <ion-list>
          <ion-item>
            <ion-label position="stacked" color="primary">email</ion-label>
            <ion-input
              v-validate="'email|required'"

This file has been truncated. show original

aaronksaunders · October 23, 2020, 9:40pm

Please see the updated content using the new vue3 components: https://www.youtube.com/playlist?list=PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN