bug: unable to validate input field in Alert prompt

[TheMohanraj]

ionic v2

provide the workaround to validate the input filed in alert prompt

[jgw96]

@Dheran Hello! Would you be able to provide some more information for this issue?And maybe a codepen or plunker of the code you have so far? Thanks!

[TheMohanraj]

FYR http://ionicframework.com/docs/v2/components/#alert-prompt

[jgw96]

@Dheran Hey! So im not sure why you sent me a link to our alert documentation but maybe im just not following correctly. At this point im not sure if your having a bug with it, or just generally asking how to do it. We need to be able to see what code you have right now so that i know which way to point you on this, thats why i asked for a codepen or plunker of what you have so far. You can read about how to do it here: https://angular.io/docs/ts/latest/guide/forms.html and if you can get a codepen together then i would be glad to help you get it working. Thanks again!

[TheMohanraj]

I'm mentioning about Alert which is an ionic component.

let prompt = Alert.create({
      title: 'Alert input validation',
      message: "How can I validate below input field?",
      inputs: [ 
        {
          name: 'title',
          placeholder: 'Title'
        },
      ],
      buttons: [
        {
          text: 'Save',
          handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });

[jgw96]

Hello! While we appreciate you opening an issue with us i am going to close this issue and ask that you open a new one that has the issue template filled out please. Thanks for using Ionic!

[WHarris22]

I have an example in this Plunker, open prompt and submit without providing an email.

Lets say I prompt the user to enter an email address it would be a good idea to validate the input and add the necessary validation classes to it or event display an error message so the user can see if something is not valid.

In my plunker I could custom validate the inputs in the .ts file of the click handler like so

handler: data => {
                        let validateObj = this.validateEmail(data);
                        if (!validateObj.isValid) {
                            alert(validateObj.message);
                            return false;
                        } else {
                            //make HTTP call
                        }
                    }

but like I said, how do I then feed this back to the user similar to the normal material design form input validation and errors.

One idea would be to have more options when setting up the inputs, maybe provide an array of validators and error messages associated with them?

I guess you can consider this as a how to question but if things can be simplified by the framework is it worth considering it as a feature request

[WHarris22]

@jgw96 can this be re-opened based on the example I provided?

After plenty of research in the last day it seems near impossible to do anything similar to what I want so should I create a new issue as a feature request?

[jgw96]

Hello (: this is actually already on the roadmap for beta.12. Feel free to post about the alert component on that issue. Thanks for using Ionic!

[WHarris22]

@jgw96 I see this as a separate issue.

My reason being that if you inspect the input elements inside the alert prompt you will notice they are not wrapped inside a form. So it seems like a lot of work will be required for the alert prompt in order to get validation working on them properly, that is why I suggested raising it as a new feature request.

Alternatively, I can just post my problem on the issue you just linked. What do you think?

[jgw96]

Hmmm at this time i would post on that issue, as that is the validation issue. Then once we get closer to beta.12 i can always split it out to a different issue if needed. Does that work for you? (:

[WHarris22]

Sounds good to me :)

[paishin]

I think what he is saying is that we should be able to perform some kind of input validation before activating the button and a way to display a warning message.
A typical use case is an alert with an input to add an email. We would like to be able to validate that a correct email address is added before activating the button and a way to display the message 'invalid email format'

[mebibou]

Looks like this issue has been dropped from the watch list, even though it is not at all like in the suggested issue.
I see there is a new handler property on the inputs in an alert, is this used for validation? is it possible to do validation on inputs in alerts as of Ionic 3?

[georgethomas2015e]

@jgw96 Is their any solution to the above problem found,
editemail() {
let prompt = this.alertCtrl.create({
title: 'Edit email',

  inputs: [
    {
      name: 'reason',
      placeholder: 'Enter email'
    },
  ],
  buttons: [
    {
      text: 'Cancel',
      handler: data => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Edit',
      handler: data => {
        console.log('edit clicked');
      }
    }
  ]
});
prompt.present();

}
As i am taking email as input from user , so i want to validate using regex that user has entered valid email or not, how can i don that please provide a way to go through

[jaalzateolaya]

@georgethomas2015e: You can validate it through the Edit Button handler, the question here is how to interact with the user in order to tell him/her whether something is wrong without dismissing the alert.

[GitGump]

@paishin yeah buddy, that's the thing, you got any solutions here?

[Sampath-Lokuge]

@WHarris22 Have you found any solution for this issue?

[mebibou]

@clubs this is not validation, it's just displaying a message outside of the modal context, definitely not what we are asking

[meddlesome]

Now I am using this way out, set a timeout at alert.addButton() to triggered whole alert object again when data is not valid.

alert.addButton({ text: 'OK', handler: (data: any) => { if(!data) { //show alert again when data is not valid setTimeout(() => { this.showAlert(); }, 1); } else { console.log(data); } } });

[barakbd]

`  ionViewDidLoad() {
    if (!this.hasBrand) {
      this._displayAlerCreateFirstBrand();
    }
  }; // end ionViewDidLoad

  private _displayAlerCreateFirstBrand() {
    const addFirstBrandAlert = this._alertController.create({
      title: "Create you first brand",
      message: "Only letters or numbers, max 32 charachters",
      inputs: [{
        name: "brandNname",
        placeholder: "e.g. 'My Client'",
        type: "text"
      }]
      ,
      buttons: [{
        text: "ADD",
        handler: data => {
          if (data.brandNname.trim().length > 1 && data.brandNname.trim().length < 33) {
            this._addBrand(data.brandNname)
          } else {
            this._displayAlertEmptyBrandName()
          }//end else
        }
      }]
    })//end addFirstBrandAlert.create
    addFirstBrandAlert.present();
  }; //end _displayAlerCreateFirstBrand

  private _displayAlertEmptyBrandName() {
    const missingFirstBrandAlert = this._alertController.create({
      title: "Must enter brand name",
      message: "Brand name cannot be empty, and cannot exceed 32 characters",
      buttons: [{
        text: "OK",
        handler: () => {
          this._displayAlerCreateFirstBrand();
        }
      }]
    }) //end missingFirstBrandAlert.create
    missingFirstBrandAlert.present();
  };// end _displayAlertEmptyBrandName
`

[GitGump]

@meddlesome nice try, but alert again cost too much and user-unfriendly, you got any other solutions that disable the 'OK' button when data is invalid?

[deepakparamesh]

@barakbd good attempt!! can I have a plunkr of yours code ?, is there any other solution found to validate the alert prompt value ?
suggestions appreciated

[jacinto-joao]

Hi, guys.

I come here looking for a similar solution, what above was mentioned.

But for what I read so far, I could see that this wasn't described in right way or maybe according to my needs.

In my case, in my app, I have some protected actions, like I display events, News in the app.
And users to use the app they're not required to be authenticated. They can read all news in the app, check upcoming events etc.

But in each news, they're options to comment about the new, Like the new or share, like the screenshot below.

So to be able to Like and Comment, you have to be authenticated, this where alert comes into action.

When users try to comment or like, I check whether they're authenticated or not, if they are not, I prompt the alertCtrl with the message telling them that they need to be authenticated in order to proceed like the screenshot below.

So my problem here is about how to handle authentication without dismissing the alert.
Like I wanted to process, the authentication without dismissing the alert, and after everything going well, be able to redirect the user to the previous action.

So the question is there a way to prevent the Alert dismissing automatically, depending on a clicked button?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.