Form validation through submit dosen't works from <ion-nav-buttons>

ionic-v1
1

Hi,

Following information from : How to do Validation with angular JS/ionic Framework, I successfully created a form that is validated (or not) after the click on a button submit.

My problem is that this submit has to be in the of the page. I need this submit to be in the . Is there a way to make the click on the submit to execute the form validation and to sbmit the form if every is all right ?

<form novalidate="novalidate" on-valid-submit="addPoLine(true)" name="form_poLine" id="form_poLine">

<ion-view title="Select Product">
<ion-nav-buttons side="right">
        <button class="button" ng-click="updatePoline()" ng-hide="addMode">Modify</button>
    	<button type="submit" class="button button-block"  ng-show="addMode">Add NOK</button>
 </ion-nav-buttons>
 <ion-content>	
        <button type="submit" class="button button-block"  ng-show="addMode">Add OK</button>
...

Th first button Add Nok doesn’t work but the second button Add OK do works. what(s wrong with my first submit button ?

Regards,

Xiaolong

2

Maybe a little different aproach, but when I have forms and use validation, I disable submit button until the form is valid. This is easiley done by adding ng-disabled to your button, something like this

ng-disabled="form_poLine.$invalid"

once the form is valid the button will become enabled, then you don’t need to run custom validation in your controller. Check Angular forms https://docs.angularjs.org/guide/forms (Custom validation) to how to setup your validation in your inputs.

Davor

3

This would be great, except that $invalid doesn’t work if its outside of the tag. So can’t go in the header. . . This would be a great feature because almost all apps have the save button in the upper right.

4

I solved that issue wrapping entire section (buttons and content) with form tag :slight_smile: hope it helps

5

thank you davor for another possible way to solve the validation needs.

But I need to let the user see what are the uncompleted field.

6

I also wraped the and the by . As you can see in my code, is in the first line.

Did you handle the validation manually in the controller checking all the field ?

7

Has anyone figured out a way to use ng-disabled if the button is outside form tag? I’ve got a button in an ion footer bar.

8

You can try using the form attribute on your button. http://caniuse.com/#feat=form-attribute

Make sure the value matches the id of your form.

1 Like