How to do Validation with angular JS/ionic Framework

ionic-v1
1

How to do Validation with angular JS/ionic Framework.

Please, Give me some example. So, we can understand better

2 Likes
2

Sorry, validation is not something we’ve properly documented yet. Its on our list of todo’s.

3

Can you provide me any sample app

4

I have a demo and some information on validation here : http://bit.ly/1lAFi1z

When there is an error, I add a red border in the label wrapper for the field. Then below the form, each error is explained.

This works pretty well in a desktop browser. In mobile, it is only partially effective. The red border works well. Unfortunately, the error text will likely never be seen by the user. The virtual keyboard on a mobile device will complete cover the error descriptions.

I tried putting the descriptions inside the label wrapper. However, CSS is not my strong suit. I couldn’t ever get the errors to display. The whole flexbox code is beyond my skill set.

So, it would be nice to have some built-in validation classes for Ionic.

2 Likes
5

I’ll link this in our validation issue for reference when we build it out, thanks for putting that together.

1 Like
6

Great to hear y’all are thinking about it. Also see this post.

Now, I don’t put error text on the page at all. Instead, I decorate the field with an icon when there is a validation error. The user taps it and currently using the default notification to display the field errors. Also, using the red border under each invalid field.

1 Like
7

Cool. We should chime in @Ben, I’m sure he’s got some good ideas.

1 Like
8

Yeah, I think we should have a chat about it this week. There’s a difference between your standard “alert” or “pop-up box,” and something more similar to a “tooltip.” I think it would be beneficial to at least offer a non-native “alert.”

In fact, I did design for what it would look like way before we began development. Somehow though, it never made it into production. Here’s a screenshot. I’d be interested in what people think.

1 Like
9

Having a non-native alert would be great. Rounded corners though?

1 Like
10

We’ll add it to our list for 1.0, or maybe the Beta. The design won’t have very rounded corners, if any, so as to keep the look coherent with the rest of the components, as well as leave the component more generic for tweaking and customizing.

1 Like
11

@adam, @Ben,

I’ve implemented something…

see

1 Like
12

@malixsys Can you setup a demo on Codepen or Plunker?

1 Like
13

I will set one up ASAP!

1 Like
14

@malixsys Did you ever get a chance to setup a demo?

1 Like
15

Sorry, was away on holiday :smile:

I put this together…

4 Likes
16

That looks really good. I had done something similar with the notification icons in the field. Unfortunately, with small fields, I kept having trouble with the icon positioning. I also added some click event handlers to the icons to have a popup that shows the validation errors. However, I scrapped it and just put the validation info below the fields.

Yours looks better than mine did though!

One problem : When I shrink the display area down on the Plunker, the error icons no longer show up.

1 Like
17

That’s awesome, I love it!

1 Like
18

Thanks!

I don’t get that problem when I pop out the preview window in Plunkr…
I also experimented with right and left border at 2-3 pixels…
I would also add the title property and an ng-click to the ! icon to get to the error…

I don’t know where to submit a pull request for all this though… :smile:

19

I popped out and emulated iPhone 4 & iPhone 5. The icons don’t show though:

20

That’s just a matter of CSS adjustments…

Something like (quick fix :smile: )

.validated {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0px;
  width: 100%; }

.validated .input-label {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 30%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 30%;
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%; 
}

.validated input {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 60%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 60%;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%; 
}

.validated error {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 10%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 10%;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%; 
}
1 Like