How to do Validation with angular JS/ionic Framework

ionic-v1
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.

1 Like
25

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

26

Hello everyone, thank you very much for such a great way to validate forms. I am having a little issue with a textarea css formatting.

I am using item-stacked-label in a list and as you can see the label is cut off.

Can someone post css to handle textarea?

thanks a lot
Oleksiy

1 Like
27

An ugly but working hack is to use a <br/>.

http://embed.plnkr.co/Zj83ZJKRRZSPLcpJn0Pv/preview

1 Like
28

Remove the class “row” from your message text label. It is overriding the item-stacked-label classes. Then add some css to position the error icon. Something like this…

.item-stacked-label i.icon.error {
position: absolute;
top:10px;
right: 10px;
}

1 Like
29

On v1.0.0-beta.1-nightly-1664, I found it much easier to follow AngularJS form conventions

then provide a style for dirty invalid fields:

input.ng-dirty.ng-invalid {
   border: 1px solid #F00;
}
1 Like
30

Tried to create the example with no luck. Is the complete example located anywhere? Also, the Plunker version doesn’t mark field invalid until the login submit. Is there a way to validate on focus lost?

I like this Angular implementation here, but haven’t been able to get it to work correctly inside of Ionic (believe CSS issues).

1 Like
31

The “validate on submit” is on purpose, as that was my original use case.

This Plunkr does blur:

http://plnkr.co/edit/kVsRSw?p=preview

1 Like
32

Thanks, where do you suggested placing an error message?

1 Like
33

I usually have my page content in a div.list so I create a div.item

    <label class="item item-input">
      <span class="input-label" i18n>picture's title</span>
      <input type="text" id="reason" placeholder="give a reason" name="reason" ng-model="info.reason" required="required" />
    </label>
      <div class="item item-icon-left" ng-show="form.$submitted && form.reason.$error.required">
        <i class="icon ion-alert-circled error"></i>
        <span>Please chose a reason.</span>
      </div>
1 Like
34

I like your indicating and showing style for invalid issues. Can you share you code with me?
Thanks.

1 Like
35

As I stated above, I mainly used @malixsys solution. However, I did this to underline the invalid fields:

form .has-error {
    border-bottom: 3px solid #F08B7C;
}
1 Like
36

I see. Here comes my two questions:

  1. How can I get which field failed and show the hint for the invalidation?
  2. In my case, I have two button for a form, whichever the user clicks the form has to be validated, and then some diffrent things has to done if the form is valid. I tried to apply the directive “on-valid-submit” on the two buttons, but I failed. How should do it?

Thank you :slight_smile:

1 Like
37

If you update the example to the nightly ionic.js, the example doesn’t display the error. Thoughts?

1 Like
38

To be specific, the example with blur, http://plnkr.co/edit/kVsRSw?p=preview20. Only change is to the nightly build of ionic.min.js.

1 Like
39

No, it works.
But there is an issue with “textarea” @malixsys
The error icon is shown before submit, and remains even it is valid already.
You can refer to the example at http://plnkr.co/edit/QCNKyNVoOisuCApU7vnv?p=preview provided by @Scott

40

I am too facing the same problem can any suggest solution to this