Validation toast for each input fields

I have a registration page, it contains some inputs and comboboxes. I need to push a toast when any of the comboboxes or inputs are not selected or entered and thet toast should show which is the field or check box that need to be entered.

      <ion-header>
    <ion-navbar>
        <ion-title>Basic Details</ion-title>
    </ion-navbar>
    </ion-header>

     <ion-content>
    <h1 class="h1">Basic Details</h1>
    <ion-row>
        <ion-col>
            <ion-input name="First Name" placeholder="First Name"></ion-input>
        </ion-col>
        <ion-col>
            <ion-input name="Last Name" placeholder="Last Name"></ion-input>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-input name="Age" placeholder="Age"></ion-input>
        </ion-col>
        <ion-col>
            <ion-datetime displayFormat="MMM DD YYYY" placeholder="Date Of Birth"></ion- 
       datetime>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-select interface="popover" placeholder="Height">
                <ion-option value="nes">4ft 8in</ion-option>
                <ion-option value="n64">4ft 9in</ion-option>
                <ion-option value="ps">5ft</ion-option>
                <ion-option value="genesis">5ft 1in</ion-option>
                <ion-option value="saturn">5ft 2in</ion-option>

            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Weight(Kgs)">
                <ion-option value="nes">48Kgs</ion-option>
                <ion-option value="n64">49Kgs</ion-option>
                <ion-option value="ps">55Kgs</ion-option>
                <ion-option value="genesis">80Kgs</ion-option>
                <ion-option value="saturn">85Kgs</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Gender">
                <ion-option value="nes">Male</ion-option>
                <ion-option value="n64">Female</ion-option>
            </ion-select>
        </ion-col>
        </ion-row>


      <ion-row>
 
        <ion-col>
            <ion-select interface="popover" placeholder="Marital Status">
                <ion-option value="nes">Never Married</ion-option>
                <ion-option value="n64">Widowed</ion-option>
                <ion-option value="ps">Divorced</ion-option>
                <ion-option value="genesis">Awaiting Divorce</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Mother Tongue">
                <ion-option value="nes">Hindi</ion-option>
                <ion-option value="n64">Tamil</ion-option>
                <ion-option value="ps">Malayalam</ion-option>
                <ion-option value="genesis">English</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Eating Habits">
                <ion-option value="nes">Vegetarian</ion-option>
                <ion-option value="n64">Non-Vegetarian</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-select interface="popover" placeholder="Smoking Habits">
                <ion-option value="nes">No</ion-option>
                <ion-option value="n64">Occasionally</ion-option>
                <ion-option value="ps">Yes</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Drinking Habits">
                <ion-option value="nes">No</ion-option>
                <ion-option value="n64">Occasionally</ion-option>
                <ion-option value="ps">Yes</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <button ion-button full color="secondary" block>Save</button>
        </ion-col>
        <ion-col>
            <button (click)="nxt()" ion-button full color="primary" block>Next</button>
        </ion-col>
    </ion-row>
     </ion-content>

ts file

     import { Component } from '@angular/core';
     import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic- 
    angular';
    import { ObsAuthService } from '../../services/obs_auth.services';
    import { MatrirelPage } from '../matrirel/matrirel';

    @Component({
    selector: 'page-matribas',
    templateUrl: 'matribas.html',
    
    providers: [ObsAuthService]
     })
    export class MatribasPage{
    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
        }

    selectChange(e) {
        console.log(e);
    }  
    public nxt(){
    this.nav.push(MatrirelPage);
    } 
    goback() {
            this.nav.pop();
    }   
    }

@OliverPrimo pls help

I created a simple form validation and I hope it can help you solve your problem.

HTML

<ion-header>
  <ion-navbar>
    <ion-title>
      Form Validation
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label stacked>First Name</ion-label>
          <ion-input type="text" placeholder="First Name" [(ngModel)]="firstname"></ion-input>
          <ion-label error-field no-margin *ngIf="!isFirstnameValid">Please enter your name.</ion-label>
        </ion-item>
        <ion-item>
          <ion-label stacked>Gender</ion-label>
          <ion-select placeholder="Gender" [(ngModel)]="gender">
            <ion-option value="Male">Male</ion-option>
            <ion-option value="Female">Female</ion-option>
          </ion-select>
          <ion-label error-field no-margin *ngIf="!isGenderValid">Please specify your gender.</ion-label>
        </ion-item>
      </ion-col>
      <ion-col>
        <button ion-button full (click)="onSave()">Save</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Typescript

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  public firstname: string = '';
  public gender: string = '';

  private isFirstnameValid: boolean = true;
  private isGenderValid: boolean = true;

  constructor(public navCtrl: NavController) {

  }

  onSave() {
    if (this.validate()) {
      alert('submit form');
    } else {
      alert('Toast error');
    }
  }

  validate(): boolean {
    this.isFirstnameValid = true;
    this.isGenderValid = true;

    if (!this.firstname || this.firstname.length == 0) {
      this.isFirstnameValid = false;
    }

    if (!this.gender || this.gender.length == 0) {
      this.isGenderValid = false;
    }

    return this.isFirstnameValid &&
        this.isGenderValid;
  }
}

Style

page-about {
  [error-field] {
    position: absolute !important;
    bottom: 0 !important;
    right: 5px !important;
    color: #b50400 !important;
    font-size: 10px;
  }

  ion-item {
    padding-bottom: 20px !important;
  }
}

And this is how it should look like:


https://ionic-5dabtk.stackblitz.io/


The only problem is that we have the different style of coding structure but it will surely help you :blush:

1 Like

thank you very much …

bro…whenever i type valid or invalid it shows the second condition toast error

It is weird because it is working fine on me. Have you tried visiting the link I’ve included so you can test it?

I dont get it bro. Please help I am stuck with this

can you paste here your code for onSave() function.

public next(){
if (this.validate()) {
alert(‘submit form’);
} else {
alert(‘Toast error’);
}
}

I have next() function

Please also paste your TS file and HTML file and if possible a screenshot of what happens in your app :slight_smile:

    <ion-header>

    <ion-navbar>
        <ion-title>Profile Creation</ion-title>
    </ion-navbar>
    </ion-header>
    <ion-content>
    <h2 class="h1"> Profile Creation</h2>
    <ion-item>
        <ion-label floating>Name <span class="required">*</span></ion-label>
        <ion-input name="Name" [(ngModel)]="Name"></ion-input>
        <ion-label error-field no-margin *ngIf="!isNameValid">Please enter your name.</ion-label>
    </ion-item>
    <ion-item>
        <ion-label floating>Email id <span class="required">*</span></ion-label>
        <ion-input name="emailid"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label floating>Mobile <span class="required">*</span></ion-label>
        <ion-input name="mobile"></ion-input>
    </ion-item>
    <ion-row>
        <ion-col>
            <button ion-button full color="danger">Send Otp</button>
        </ion-col>
        <ion-col>
            <ion-input name="Otp" placeholder="Otp"></ion-input>
        </ion-col>
    </ion-row>
    </ion-content>

     <ion-footer no-shadow class="foot">
    <ion-toolbar position="bottom">
        <ion-row>
            <ion-col>
                <button (click)="next()" ion-button full color="primary" block>Next</button>
            </ion-col>
        </ion-row>
    </ion-toolbar>
     </ion-footer>
     import { Component } from '@angular/core';
    import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic- 
    angular';
    import { ObsAuthService } from '../../services/obs_auth.services';
    import { MatribasPage } from '../matribas/matribas';

     @Component({
    selector: 'page-matrireg',
    templateUrl: 'matrireg.html',
    
    providers: [ObsAuthService]
     })

    export class MatriregPage{

    public name: string = '';
    private isNameValid: boolean = true;

    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
        }

    selectChange(e) {
        console.log(e);
    }  
    
    public next(){

        if (this.validate()) {
            alert('submit form');
          } else {
            alert('Toast error');
          }

    }
    goback() {
        this.nav.pop();     
     }

     validate(): boolean {
    
    if (!this.name || this.name.length == 0) {
      this.isNameValid = false;
    }
    else{
        this.isNameValid=true;
    }
    return this.isNameValid;
    }
     }

when i click the next button it shows toast error when i enter the right input. actually if the input is right i need to move to next page

As I observed your code. Your ngModel is different to each other and it is case sensitive. So try changing your ngModel.

 // from Name
<ion-input name="Name" [(ngModel)]="Name"></ion-input>

to

// to name
<ion-input name="Name" [(ngModel)]="name"></ion-input>
1 Like

yeah it worked bro. Thank you

1 Like