How to do Validation with angular JS/ionic Framework.
Please, Give me some example. So, we can understand better
2 Likes
Sorry, validation is not something we’ve properly documented yet. Its on our list of todo’s.
Can you provide me any sample app
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
I’ll link this in our validation issue for reference when we build it out, thanks for putting that together.
1 Like
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
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
Having a non-native alert would be great. Rounded corners though?
1 Like
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
I will set one up ASAP!
1 Like
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
That’s awesome, I love it!
1 Like
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… 
That’s just a matter of CSS adjustments…
Something like (quick fix 
)
.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