How to do Validation with angular JS/ionic Framework


#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.


#7

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


#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.


#9

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


#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.


#11

@adam, @Ben,

I’ve implemented something…

see


#12

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


#13

I will set one up ASAP!


#14

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


#15

Sorry, was away on holiday :smile:

I put this together…


#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.


#17

That’s awesome, I love it!


#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:


CSS + Ionic
#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%; 
}

#21

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; }

#22

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,.


#23

@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)


#24

I used much of @malixsys solution. It works pretty well. For invalid issues, I just ended up putting them below all the fields. This is really a preference issue.


#25

I like @Calendee’s way of using it, very unobtrusive.
This works with 0.9.27: