Form validation in angularjs (ionic) doesn't work for me

Question

What do I want to achieve?

I have a form with inputs that have certain types and that are required. Whenever a user clicks 'submit' I want to check whether the form passes validation or not.

This is the bare-minimum demo to show how far I got everything to work: http://jsbin.com/gokewosoti/13/edit (updated with solution)

I created the submit handler called doForm that handles the click event on the submit button. Inside I have access to the variable theForm (the form's name).

According to some sources (http://blog.brunoscopelliti.com/form-validation-the-angularjs-way) I should be able to do theForm.$valid and get a boolean showing if the form is valid or not. This turns out not to work.

It does work when I run some cumbersome code: formy = angular.element(theForm).scope().theForm Then suddenly formy.$valid works.

What am I doing wrong?

Update (solved)

The solution thanks to marked answer: http://jsbin.com/gokewosoti/14/edit

bodagetta · Accepted Answer · 2014-12-17 18:09:10Z

4

You need to pass the form to the function you are calling.

So your submit button code needs to change to this

<input type='submit' value='submit' ng-click='doForm(theForm)' />

and your doForm function needs to change to this

$scope.doForm = (theForm) ->

You'll need to delete this section to clear up errors in the console

  formy = angular.element(theForm).scope().theForm

  if formy.$valid == true
    console.log "Wrong is valid"
  else
    console.log "Wrong is not valid"

So your complete submit function looks like this

$scope.doForm = (theForm) ->
  # Here `theForm` is an html element, not a 
  # angular-ised object

  # So this doesn't work:
  if theForm.$valid == true
    console.log "I am valid"
  else
    console.log "Form isn't valid"

Note that you need to put a valid email address format in the last input box to validate correctly.

answered Dec 17, 2014 at 18:09

bodagetta

8348 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mosselman Over a year ago

Thanks a lot! Do you happen to know what the difference is between the theForm variable that is in the view and the one in the controller?

Mosselman Over a year ago

I still have a slightly ionicframework related question. How would I be able to trigger doForm(theForm) from the header? It seems as if theForm is not available to things outside of the ion-content tag. This is illustrated here: jsbin.com/teruru/2/edit

bodagetta Over a year ago

I don't think you declare theForm as a variable on your scope so it doesn't exist, and you shouldn't. Just pass the form to your submit function and all is good. Then access your form inputs by their ng-model in your submit function. Good luck!

Mosselman Over a year ago

thanks for the response. What I mean is that when I press 'do' (in the link mentioned in my comment), I do not have access to theForm so I cannot pass it. Hence seeing 'form does not exist' when you open up the console in the jsbin.

bodagetta Over a year ago

I understand what you're asking now. Here is how it works: jsbin.com/keqiyo/2/edit?html,js,output You need to set the form into a scope variable and can do that with a ng-init in a div inside of the form that calls a function to set the form in a $scope variable. Then you can call a 'doForm' funtion and not worry about passing anything in.

|

Collectives™ on Stack Overflow

Form validation in angularjs (ionic) doesn't work for me

Update (solved)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update (solved)

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related