Any ionic way of form input validation and summary preview?

Im thinking of say using a form with inputs. (Sorry if my question is amateurish)

For example:

  1. Must enter a min/max of X words/ char
  2. Must be mix of numbers or words, i understand theres some for of regex but im not too sure on how to interpret or set the codes.
  3. If no entry of field, shows a warning and will not be able to submit.
  4. Any way of showing like mini icons like summary pics/icons of a url link?

If you could provide some codes, that would be great!

Im using a simple ng-click="submit()" with the html for form input as <input type="text"...etc>

You could work from this example as a starting point

1 Like

The example form above doesn’t work for me. (If I’m understanding the purpose correctly.)

May have been an issue with http/https


@mhartington Your codepen only works with bootstrap 3.0, but not with ionic.css. I do not see form-group and has-error classes in ionic.css, unless I am missing something here. I really like the red border around the input box which should tell user that the input is really required.

Any advice on copying the boot classes to our style.css and its impact on over all app look and feel.


Well that was meant to show you how you could go about creating your own form validation.
Theres nothing built into ionic by default for forms, because there is no one solution.

Here’s an example I did using the same methods in the bootstrap example, but using ionic’s markup

Thank you Mike @mhartington. This helps.