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.

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

27

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

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

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

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

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

32

Thanks, where do you suggested placing an error message?

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>
34

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

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

37

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

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.

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