Ion-input validation style on vanilla js

Ionic Framework
1

I’m not using Angular or any other framework. I have an ion-input inside an ion-item. I’m using HTML5 validation and nothing is highlighting red when the input is invalid.

I know in Angular it checks the ng classes to then add the ionic classes but how does this work for vanilla JS? I can’t find any documentation for this.

2 
    'ion-valid',
    'ion-invalid',
    'ion-touched',
    'ion-untouched',
    'ion-dirty',
    'ion-pristine'

So the classes in question are listed above, and I would add that neither react or vue have this enabled out of the box. Angular only has this because it has a built in form validation API.

So in a VanillaJS example, you’d have to define what happens with each component and manually control the classes that get applied.

3

Thanks for the reply. I’ll add the required code.

Is validation documented somewhere? All I could find is this
https://ionicframework.com/docs/api/item#highlight-color

4

Most of that is in regards to Angular’s validation API.

It really is up to you define. You could also look at this doc from MDN about how to build out your own validation lib.

5

I think there was a miscommunication. When I was replied asking about documentation I meant something simply stating that developers need to hook into the validation themselves, not how to validate. Something like “Add the “ion-invalid” class to ion-item when your form is invalid.”…

This kickstart will immediately put future ionic devs on the right track and prevent confusion around the Angular validation if they happen to stumble across it.