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


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



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


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 (Custom validation) to how to setup your validation in your inputs.


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.

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

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.

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 ?

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.

You can try using the form attribute on your button.

Make sure the value matches the id of your form.

1 Like