How to do Validation with angular JS/ionic Framework. Please, Give me some example. So, we can understand better

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

Sorry, was away on holiday :smile: I put this together…

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.

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:

That’s just a matter of CSS adjustments… Something like (quick fix :smile: ) [image] Plunker - Using Resolve to Set the Nav Title Created on https://plnkr.co: Helping you build the web. .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%; }

Ended up using for now: .validated { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: horizontal; -moz-flex-direction: horizontal; -ms-flex-direction: horizontal; flex-direction: horizontal; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; padding-right: 4px; } .validated .input-label { width: 136px; max-width: 136px; min-width: 136px; } .validated .checkbox .input-label { margin-left: 0px; } .validated input[type="text"], .validated input[type="password"], .validated input[type="datetime"], .validated input[type="datetime-local"], .validated input[type="date"], .validated input[type="month"], .validated input[type="time"], .validated input[type="week"], .validated input[type="number"], .validated input[type="email"], .validated input[type="url"], .validated input[type="search"], .validated input[type="tel"], .validated input[type="color"] { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: block; } .validated error { min-width: 16px; max-width: 16px; width: 16px; }

Hi Malixsys, I have implemented your solution, but doesn’t work, just want to know whether your solution is available for 0.9.27 as well? Thanks,.

@malixsys Solution seems cool! Is there a way to implement error feedback messages as well? E.g. ‘Invalid e-mail address’ and/or ‘E-mail address cannot be empty’ (different messages for different errors)

How to do Validation with angular JS/ionic Framework

ionic-v1

Calendee February 11, 2014, 3:43pm 19

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

CSS + Ionic

Topic		Replies	Views
Forms - just can find a working example ionic-v3	17	33847	September 14, 2017
A working good form validation example ionic-v3	3	1048	September 14, 2018
A good form validation example? ionic-v3	26	65118	March 16, 2019
Validating form css - ionic3 ionic-v3	1	483	April 27, 2017
A pure angular validate module with toast for mobile app/website without jQuery dependency ionic-v1	0	783	December 1, 2015

How to do Validation with angular JS/ionic Framework

Related topics